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;
            };  
        }
复制代码

参考：segmentfault.com/a/119000000…