文章目錄
  1. 1. 组件的生命周期分为三个状态
  2. 2. 处理函数
  3. 3. 流程图

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

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

处理函数

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

  1. componentWillMount()

    只会在装载之前调用一次,在 render 之前调用,你可以在这个方法里面调用 setState 改变状态,并且不会导致额外调用一次 render

  2. componentDidMount()

    只会在装载完成之后调用一次,在 render 之后调用,从这里开始可以通过 ReactDOM.findDOMNode(this) 获取到组件的 DOM 节点。

  3. componentWillUpdate(object nextProps, object nextState)

    组件实例即将重新渲染时被调用
    这个方法在初次渲染时不会被调用。
    注意:不能在此方法内调用setState()。

  4. componentDidUpdate(object prevProps, object prevState)

    组件实例重新渲染后被调用
    这个方法在初次渲染时不会被调用。

  5. componentWillUnmount()

    组件实例即将从DOM树移除时被调用
    这个方法在整个生命周期中只会被调用一次。

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

  1. componentWillReceiveProps(object nextProps)

    已加载组件收到新的参数时调用,参数nextProps表示即将应用到组件实例上的新属性值。这个方法在初次渲染时不会被调用。在此方法内调用setState()不会引起重新渲染。

  2. shouldComponentUpdate(object nextProps, object nextState)

    组件实例即将重新渲染时被调用
    参数nextProps传入即将应用到组件实例上的新属性值,参数nextState传入组件实例即将被 设置的状态值。如果这个方法返回false,那么组件实例就不会被重新渲染。除非我们明确地 知道,新的属性和状态不需要进行重新渲染,否则这个方法都应该返回true。
    这个方法在初次渲染时或通过forceUpdate()方法进行渲染时不会被调用。

    流程图

文章目錄
  1. 1. 组件的生命周期分为三个状态
  2. 2. 处理函数
  3. 3. 流程图