React生命周期

2018-05-11  本文已影响10人  紫灬楓

初始渲染阶段

当组件开始开始生命进入组件,调用以下生命周期方法:

1,getDefaultProps

此方法允许我们指定 this.props 的默认值,它在组件被调用或者父组件传递任何属性进来之前被调用。

2,getInitialState

此方法允许我们指定组件在创建前 this.state 的默认值,它也是在组件被创建前被调用。

3,componentWillMount

此方法是是组件被渲染到DOM之前最后调用的一个方法,需要注意的是,在这个方法中调用setState,组件是不会重新渲染的。

4,render

很熟悉的方法了,每个组件必须定义有这个方法,它负责返回单个HTML根节点,如果我们不想渲染任何东西,那么返回 null 或者 false 即可。

5,componentDidMount

此方法是在组件渲染到DOM后才会被调用,在这个点上,我们可以安全的执行任何 DOM 查询操作,而不用担心组件是否被创建。

更新阶段

处理状态改变

当状态发生改变时,调用以下生命周期方法:

1,shouldComponentUpdate

如果一个状态改变了,我们不想更新组件,此方法就可以让我们控制更新行为。如果想更新,返回 true 值,否则返回 false 即可。以下示例:

shouldComponentUpdate: function(newProps, newState) { 
if (newState.id <= 2) { 
console.log("Component should update!"); 
return true;
 } else { 
console.log("Component should not update!"); 
return false; 
  } 
}

该方法带有两个参数: newProps 和 newState 。上面的代码片段用来判断 id 状态属性的新值是否小于等于 2。如果是,那么返回 true ,指示该组件要更新。如果不是,那么返回 false ,指示组件不更新。

2,componentWillUpdate

此方法是在组件被更新之前调用,需要注意的是:不能再此方法中使用 this.setState 来修改状态。

3,render

如果没有通过 shouldComponentUpdate 方法忽略更新的话,那么render会再次调用,以确保组件正确显示。

4,componentDidUpdate

此方法是在组件更新以及render方法被调用后才被调用,组件更新后要执行的代码可以放在这里。

处理props改变

当组件被渲染到DOM后,props值发生改变,调用以下生命周期方法:

1,componentWillReceiveProps

此方法只返回一个参数,该参数包含将要赋值的新props值。

2,shouldComponentUpdate
3,componentWillUpdate
4,render
5,componentDidUpdate

其后的生命周期同上一段,行为是一致的。

卸载阶段

这是最后一个阶段,组件要销毁也就是从DOM移除时调用:

componentWillUnmount

这个阶段只有一个方法,我们可以在这个方法中执行清理相关的任务,比如移除事件监听器、停止计数器等等。在该方法被调用后,组件就从 DOM 中移除。

————————————————
参考来源

上一篇 下一篇

猜你喜欢

热点阅读