常用的react生命周期的简单总结

常用的生命周期图示：

 

挂载阶段：constructor =>  render => componentDidMount => 结束
更新阶段： render => componentDidUpdate => 结束
卸载阶段：componentWillUnmount => 结束

constructor

1. 构造函数用于以下两种情况：
   • 通过给 this.state 赋值对象来初始化内部 state。this.state = {prop: val, ...}
   • 为事件处理函数绑定实例 this.handler = this.handler.bind(this);
2. 如果不初始化 state 或不进行方法绑定，则不需要为 React 组件实现构造函数。
3. super(props)应写在该方法的最前面;否则，this.props在构造函数中可能会出现未定义的bug

render

1. render()方法是class组件中唯一必须实现的方法。
2. 返回以下类型之一：React元素, 数组或fragments, Portals, 字符串或数值类型, 布尔类型或null
3. render()函数应该为纯函数

componentDidMount()

会在组件挂载后(插入DOM树中)立即调用。

1. 进行依赖于DOM节点的初始化，如需通过网络请求获取数据，此处是实例化请求的好地方。
2. 添加订阅的地方。如果添加了订阅。不要忘记在 componentWillUnmount() 里取消订阅
3. 可以在 componentDidMount()里可以直接调用setState()。将触发额外渲染，会导致性能问题。

componentDidUpdate()

1. componentDidUpdate(prevProps, prevState, snapshot) 有三个默认参数
2. componentDidUpdate() 会在更新后会被立即调用。首次渲染不会执行此方法。
3. 可以在此处对 DOM 进行操作。可以选择在此处进行网络请求。
4. 可以在 componentDidUpdate()中直接调用 setState()，但请注意它必须被包裹在一个条件语件里，否则会导致死循环。导致额外的重新渲染，会影响组件性能。
5. 如果组件实现了getSnapshotBeforeUpdate(), 则它的返回值将作为 componentDidUpdate() 的第三个参数 “snapshot” 参数传递。否则此参数将为 undefined。

componentWillUnmount()

1. componentWillUnmount() 会在组件卸载及销毁之前直接调用。在此方法中执行必要的清理操作，例如，清除 timer，取消网络请求或清除在 componentDidMount() 中创建的订阅等。
2. componentWillUnmount() 中不应调用 setState()，因为该组件将永远不会重新渲染。组件实例卸载后，将永远不会再挂载它。