在React更新到V16版本后，我们会发现React新加了一些生命周期并且即将停用一些生命周期，今天我们就来follow最新的React 16的生命周期。
放出官方图
image.png
image.png
-
即将过期的生命周期 （慎用）
componentWillMount()
componentWillReceiveProps()
componentWillUpdate()
-
常用的生命周期
当组件实例被创建并插入 DOM 中时，其生命周期调用顺序如下：
- constructor()
- render()
- componentDidMount()
当组件的 props 或 state 发生变化时会触发更新。组件更新的生命周期调用顺序如下：
- static getDerivedStateFromProps()
- shouldComponentUpdate()
- render()
- getSnapshotBeforeUpdate()
- componentDidUpdate()
-
注意
- render() 函数应该为纯函数，这意味着在不修改组件 state 的情况下，每次调用时都返回相同的结果，并且它不会直接与浏览器交互。
如需与浏览器进行交互，请在 componentDidMount() 或其他生命周期方法中执行你的操作。保持 render() 为纯函数，可以使组件更容易思考。 - 避免将 props 的值复制给 state 尤其是引用了redux的情况下
constructor(props) {
super(props);
// 不要这样做 当你更新了props是并不会影响state
this.state = { color: props.color };
}
- componentDidMount() 会在组件挂载后（插入 DOM 树中）立即调用。所以可以在这里Ajax
- 慎在componentDidMount()里调用this.setSate()会重复渲染建议在constructor里初始化
- 首次渲染不会执行componentDidUpdate()
- 当组件更新后，可以在componentDidUpdate对 DOM 进行操作。如果你对更新前后的 props 进行了比较，也可以选择在此处进行网络请求。
- 不要将 props “镜像”给 state，请考虑直接使用 props
转载于:https://www.jianshu.com/p/713bbe5bf080