React 生命周期

React 生命周期

生命周期图解

初始阶段

1. 设置默认属性 (defaultProps), 设置属性类型 (propTypes)
2. 初始化状态 (state = {})
3. componentWillMount() -> 生命周期函数，在组件即将渲染前触发，可以做初始化数据显示。(注意：这个方法已经被标为不安全方法，官方不推荐使用)
4. render() -> 触发了组件渲染
5. componentDidMount() -> 此时的组件已经生成了DOM结构，可以进行有关操作。可以使用此方法替换componentWillMount

运行时

1. componentWillReceiveProps() -> 当 props 发生变化的时候，也就是说父组件改变的时候会调用这个方法。但是注意的是，这个方法在初始化render的时候不会执行的
2. shouldComponentUpdate() -> 组件接收到新属性时，或者组件状态改变时候出发组件更新，在组件初始化渲染的时候不会触发，这个函数可以做为优化组件性能的选择。在react 项目中更新一个组件可能需要其父组件更新，但是一个父组件下可能还会有别的子组件，一旦父组件更新了状态，那么所有子组件都要执行 render 方法，这样就太耗费性能了。所以可以使用 shouldComponentUpdate() 方法判断是否应该更新。其实你还可以通过继承 PureComponent 类，如果继承了这个类，那么在组件更新时候就会先去和之前的属性判断，从而判断是否应该更新
3. componentWillUpdate() -> 组件即将被触发更新
4. componentDidUpdate() -> 组件更新完成后生成新DOM

销毁阶段

1. componentWillUnmount() -> 这是在组件被销毁时执行的方法。