React生命周期——各周期的特点

在组件的整个生命周期中，随着该组件的props或者state发生改变，其DOM表现也会有相应的变化。一个组件就是一个状态机，对于特定地输入，它总返回一致的输出。

组件的生命周期可分成三个状态：

• Mounting：已插入真实 DOM
• Updating：正在被重新渲染
• Unmounting：已移出真实 DOM

第一个状态（实例化期）

• getDefaultProps: 对于每个组件实例来讲，这个方法只会调用一次，可用于设置默认的 props值
• getInitialState：这个方法的调用有且只有一次，用来初始化每个实例的 state
• componentWillMount：render 方法调用之前修改 state 的最后一次机会,可以用来将props的参数设置到state里面去
• componentDidMount：
  1. 该方法被调用时，已经渲染出真实的 DOM，可以再该方法中通过 this.getDOMNode() 访问到真实的 DOM(推荐使用 ReactDOM.findDOMNode())
  2. 不会在服务端被渲染的过程中调用（可以用来获取canvas的id/ref等）
  3. 页面已经被加载完，用来监听页面

render（渲染页面）

第二个状态（存在期）

• componentWillReceiveProps（nextProps）：
  1. 在这个方法里更新 state,以触发 render 方法重新渲染组件
  2. 用来监听props的变化（需要监听变化的值存入state里面对比）

    if(nextProps .x !== this.state.x ){
    
    }

• shouldComponentUpdate：如果你确定组件的 props 或者 state 的改变不需要重新渲染，可以通过在这个方法里通过返回 false 来阻止组件的重新渲染，返回 `false 则不会执行 render 以及后面的 componentWillUpdate，componentDidUpdate 方法
• componentWillUpdate：
  1. 在组件接收到了新的 props 或者 state 即将进行重新渲染前，componentWillUpdate(object nextProps, object nextState) 会被调用
  2. 不要在此方面里再去更新 props 或者 state

第三个状态（销毁期）

• componentDidUpdate：在组件重新被渲染之后，componentDidUpdate(object prevProps, object prevState) 会被调用。可以在这里访问并修改 DOM
• componentWillUnmount:
  1. 每当React使用完一个组件，这个组件必须从 DOM 中卸载后被销毁，此时 componentWillUnmout 会被执行，完成所有的清理和销毁工作，在 componentDidMount 中添加的任务都需要再该方法中撤销，如创建的定时器或事件监听器
  2. 刷新浏览器时没有卸载组件，只有离开页面才会卸载
  3. 离开页面时卸载组件，清空state里面的值

    componentWillUnmount(){ 
            //重写组件的setState方法，直接返回空
            this.setState = (state,callback)=>{
            return;
            };  
        }

参考：https://segmentfault.com/a/1190000004168886?utm_source=tag-newest#articleHeader0