React v16 生命周期

在React更新到V16版本后，我们会发现React新加了一些生命周期并且即将停用一些生命周期，今天我们就来follow最新的React 16的生命周期。

官方文档

放出官方图

image.png image.png

• 即将过期的生命周期 （慎用）

componentWillMount()

componentWillReceiveProps()

componentWillUpdate()

• 常用的生命周期

当组件实例被创建并插入 DOM 中时，其生命周期调用顺序如下：

1. constructor()
2. render()
3. componentDidMount()

当组件的 props 或 state 发生变化时会触发更新。组件更新的生命周期调用顺序如下：

1. static getDerivedStateFromProps()
2. shouldComponentUpdate()
3. render()
4. getSnapshotBeforeUpdate()
5. componentDidUpdate()

• 注意

1. render() 函数应该为纯函数，这意味着在不修改组件 state 的情况下，每次调用时都返回相同的结果，并且它不会直接与浏览器交互。
   如需与浏览器进行交互，请在 componentDidMount() 或其他生命周期方法中执行你的操作。保持 render() 为纯函数，可以使组件更容易思考。
2. 避免将 props 的值复制给 state 尤其是引用了redux的情况下

constructor(props) {
 super(props);
 // 不要这样做 当你更新了props是并不会影响state
 this.state = { color: props.color };
}

3. componentDidMount() 会在组件挂载后（插入 DOM 树中）立即调用。所以可以在这里Ajax
4. 慎在componentDidMount()里调用this.setSate()会重复渲染建议在constructor里初始化
5. 首次渲染不会执行componentDidUpdate()
6. 当组件更新后，可以在componentDidUpdate对 DOM 进行操作。如果你对更新前后的 props 进行了比较，也可以选择在此处进行网络请求。
7. 不要将 props “镜像”给 state，请考虑直接使用 props