React 学习笔记

生命周期

1. getDefaultProps
作用于组件类，只调用一次，返回对象用于设置默认的props，对于引用值，会在实例中共享。

2. getInitialState
作用于组件的实例，在实例创建时调用一次，用于初始化每个实例的state，此时可以访问this.props。
// 其中getDefaultProps和getInitialState 对应在ES6中也就是在 constructor构造方法中的初始化属性与状态。

3. componentWillMount 
在渲染前调用,在客户端也在服务端。

4. componentDidMount 
在第一次渲染后调用，只在客户端。之后组件已经生成了对应的DOM结构，可以通过this.getDOMNode()来进行访问。 
如果你想和其他JavaScript框架一起使用，可以在这个方法中调用setTimeout, setInterval或者发送AJAX请求等操作(防止异部操作阻塞UI)。

5. getDerivedStateFromProps 代替 componentWillReceiveProps(nextProps)  
// 16.3之后不推荐使用componentWillReceiveProps 改用UNSAFE_componentWillReceiveProps 替代
在组件接收到一个新的 prop (更新后)时被调用。这个方法在初始化render时不会被调用。

6. shouldComponentUpdate(nextProps, nextState) 
返回一个布尔值。在组件接收到新的props或者state时被调用。
在初始化时或者使用forceUpdate时不被调用。 可以在你确认不需要更新组件时使用。

7. getSnapshotBeforeUpdate 代替 componentWillUpdate(nextProps, nextState) 
// UNSAFE_componentWillUpdate 替代
在组件接收到新的props或者state但还没有render时被调用。在初始化时不会被调用。

8. componentDidUpdate 
在组件完成更新后立即调用。在初始化时不会被调用。

9. ReactElement render()

10. componentWillUnmount
在组件从 DOM 中移除的时候立刻被调用。

16.3生命周期变动说明

实例化

实例化完成后的更新
这些方法会在组件实例被创建和插入DOM时被调用

• constructor
• componentWillMount
• render
• componentDidMount

更新

• 属性或状态的改变会触发一次更新，当一个组件被重新渲染时，这些方法会被调用*
• componentWillReceiveProps()
• shouldComponentUpdate()
• componentWillUpdate()
• render()
• componentDidUpdate()

销毁&清理期
当一个组件被从DOM中移除时，该方法被调用

• componentWillUnmount()