React基础学习三

一、JSX

1、元素是构成React应用的最小单位，JSX就是用来声明React当中的元素
2、JSX就是JavaScript，一些标识符像class和for不建议作为XML属性名。作为替代，React DOM使用className和htmlFor来做对应的属性。
3、p元素添加自定义属性data-myattribute，添加自定义属性需要使用data-前缀。
4、不能使用 if else 语句，但可以使用三元运算表达式来代替。
5、样式推荐使用内联样式，使用小写驼峰语法。

二、组件

1、元素HTML以小写字母开头，而自定义的React类名以大写字母开头。
2、组件类只能包含一个顶层标签。

三、State状态

1、React把组件看成一个状态机。通过与用户的交互，实现不同状态，然后渲染UI，让用户界面和数据保持一致。
2、只需更新组件的state，然后根据新的state重新渲染用户界面。不需要早多DOM。
3、生命周期：挂载componentDidMount()、卸载componentWillUnmount()
4、代码执行顺序（假设带有组件Clock）
首先，当组件传递给ReactDOM.render()时，React调用Clock组件的构造函数constructor，初始化this.state
第二，调用Clock组件的render()方法，React更新DOM以匹配Clock的渲染输出
第三，当Clock的输出插入得到DOM中时，React调用componentDidMount() 生命周期钩子
第四，通过调用 setState() ，React 知道状态已经改变，并再次调用 render() 方法来确定屏幕上应当显示什么
第五，一旦 Clock 组件被从 DOM 中移除，React 会调用 componentWillUnmount() 这个钩子函数
5、数据自顶向下流动或单向数据流

四、Props

1、state可以根据与用户交互来改变，而props是不可变的
2、默认的Props,通过组件类的defaultProps属性为props设置默认值
3、Props 验证使用 propTypes，它可以保证我们的应用组件被正确使用，React.PropTypes 提供很多验证器 (validator) 来验证传入数据是否有效。

五、事件处理

1、React 事件绑定属性的命名采用驼峰式写法，而不是小写
2、不能使用返回 false 的方式阻止默认行为，你必须明确使用 preventDefault
3、必须谨慎对待 JSX 回调函数中的 this，类的方法默认是不会绑定 this 的。如果你忘记绑定 this.handleClick 并把它传入 onClick, 当你调用这个函数的时候 this 的值会是 undefined。
第一，构造函数constructor里： this.handleClick = this.handleClick.bind(this);
第二，使用属性初始化器来正确的绑定回调函数： handleClick = () => {console.log(‘this is:’, this);}
第三，render()里：<button onClick={(e) => this.handleClick(e)}>Click me

六、组件API

1、设置状态:setState
setState(object nextState[, function callback])：将要设置的新状态，该状态会和当前的state合并。
对象式的setState用法

this.setState(
  {
    
    isAuthenticated: true},
   () => console.log(this.state.isAuthenticated + '.')
);

函数式的setState用法

this.setState((preState, props) => {
    
    
  return {
    
    isAuthenticated: props.isAuthen || !preState.isAuthenticated}
 });

2、替换状态：replaceState
replaceState(object nextState[, function callback])：将要设置的新状态，该状态会替换当前的state。
3、设置属性：setProps
setProps(object nextProps[, function callback])：将要设置的新属性，该状态会和当前的props合并
4、替换属性：replaceProps
replaceProps(object nextProps[, function callback])：将要设置的新属性，该属性会替换当前的props。
5、强制更新：forceUpdate
forceUpdate([function callback])：可选参数，回调函数。该函数会在组件render()方法调用后调用。
6、获取DOM节点：findDOMNode
DOMElement findDOMNode()：DOM元素DOMElement
7、判断组件挂载状态：isMounted
bool isMounted()：true或false，表示组件是否已挂载到DOM中

七、生命周期

1、三个状态：Mounting：已插入真实 DOM、Updating：正在被重新渲染、Unmounting：已移出真实 DOM
2、生命周期函数：
componentWillMount：在渲染前调用,在客户端也在服务端。
componentDidMount : 在第一次渲染后调用，只在客户端。之后组件已经生成了对应的DOM结构，可以通过this.getDOMNode()来进行访问。如果你想和其他JavaScript框架一起使用，可以在这个方法中调用setTimeout, setInterval或者发送AJAX请求等操作(防止异步操作阻塞UI)。
componentWillReceiveProps：在组件接收到一个新的 prop (更新后)时被调用。这个方法在初始化render时不会被调用。
shouldComponentUpdate：返回一个布尔值。在组件接收到新的props或者state时被调用。在初始化时或者使用forceUpdate时不被调用。可以在你确认不需要更新组件时使用。
componentWillUpdate：在组件接收到新的props或者state但还没有render时被调用。在初始化时不会被调用。
componentDidUpdate：在组件完成更新后立即调用。在初始化时不会被调用。
componentWillUnmount：在组件从 DOM 中移除之前立刻被调用。

八、Refs

React 支持一种非常特殊的属性 Ref ，你可以用来绑定到 render() 输出的任何组件上。然后通过 this.refs 获取支撑实例。