React 生命周期函数

94 阅读1分钟

React 生命周期函数

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

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

React 为每个状态都提供了两种处理函数,will 函数在进入状态之前调用,did 函数在进入状态之后调用,三种状态共计五种处理函数。

componentWillMount():在渲染前调用
componentDidMount():在渲染后调用
componentWillUpdate(object:nextProps, object:nextState):在组件接收到新的props或者state但还没有render时被调用。在初始化时不会被调用。
componentDidUpdate(object:prevProps, object:prevState):在组件完成更新后立即调用。在初始化时不会被调用。
componentWillUnmount(): 在组件从 DOM 中移除的时候立刻被调用

life.jpg

此外,React 还提供两种特殊状态的处理函数。

componentWillReceiveProps(object:nextProps):已加载组件收到新的参数时调用,这个方法在初始化render时不会被调用。
shouldComponentUpdate(object nextProps, object nextState):组件判断是否重新渲染时调用,返回一个布尔值。在组件接收到新的props或者state时被调用。在初始化时或者使用forceUpdate时不被调用。