React组件性命周期

此文章合适 React@17 之前的版本，React@16.3.0，添加了一些新的性命周期函数，同时预备烧毁一些会形成搅扰的性命周期函数。一切假如在React@17 宣布之前，这篇文章照样实用的。
新的性命周期请看官网 blog 文章 React v16.3.0: New lifecycles and context API。

媒介

组件会跟着组件的 props 和 state 转变而发生变化，它的 DOM 也会有相应的变化。

一个组件就是一个状况机：关于特定的输入，它总会返回一致的输出。

React组件供应了性命周期的钩子函数去相应组件差别时候的状况，组件的性命周期以下：

• 实例化
• 存在期
• 烧毁期

钩子函数是我们重点关注的处所，下面来细致了解下性命周期下的钩子函数挪用递次和作用。每一个性命周期阶段挪用的钩子函数会略有差别。下面的图片也许对你有协助。

能够检察 CodePen 在线 Demo React 性命周期

实例化

初次挪用组件时，有以下要领会被挪用（注重递次，从上到下前后实行）：

• getDefaultProps

  这个要领是用来设置组件默许的 props，组件性命周期只会挪用一次。然则只合适 React.createClass 直接建立的组件，运用 ES6/ES7 建立的这个要领不可运用， ES6/ES7 能够运用下面体式格局：

  // es7
  class Component {
    static defaultProps = {}
  }
  // 或许也能够在表面定义es6
  // Compnent.defaultProps

• getInitialState

  设置state初始值，在这个要领中你已能够接见到 this.props。 getInitialState 只合适 React.createClass 运用。运用 ES6 初始化state要领以下：

  class Component extends React.Component{
    constructor(props){
      super(props);
      this.state = {
        render: true,
      }
    }
  }

  或许如许

  class Component extends React.Component{
    state = {
        render: true
    }
    render(){return false;}
  }

• componentWillMount

  改要领会在组件初次衬着之前挪用，这个是在 render 要领挪用前可修正 state 的末了一次时机。这个要领很少用到。

• render

  这个要领今后人人都应当会很熟悉，JSX 经由过程这里，剖析成对应的假造 DOM，衬着成终究结果。花样大抵以下：

  class Component extends React.Component{
    render(){
      return (
         <div></div>
      )
    }
  }

  ​

• componentDidMount

  这个要领在初次实在的 DOM 衬着后挪用（仅此一次）当我们须要接见实在的 DOM 时，这个要领就常常用到。怎样接见实在的 DOM 这里就不想说了。当我们须要要求外部接口数据，平常都在这里处置惩罚。

存在期

实例化后，当props或许state发生变化时，下面要领顺次被挪用：

• componentWillReceiveProps

  没当我们经由过程父组件更新子组件 props 时（这个也是唯一门路），这个要领就会被挪用。

  componentWillReceiveProps(nextProps){}

• shouldComponentUpdate

  字面意义，是不是应当更新组件，默许返回 true。当返回 false 时，后期函数就不会挪用，组件不会在次衬着。

  shouldComponentUpdate(nextProps,nextState){}

• componentWillUpdate

  字面意义组件将会更新，props 和 state 转变后必挪用。

• render

  跟实例化时的render一样，不多说

• componentDidUpdate

  这个要领在更新实在的 DOM 胜利后挪用，当我们须要接见实在的 DOM 时，这个要领就也常常用到。

烧毁期

烧毁阶段，只要一个函数被挪用：

• componentWillUnmount

  没当组件运用完成，这个组件就必须从DOM中烧毁，此时该要领就会被挪用。当我们在组件中运用了 setInterval，那我们就须要在这个要领中挪用 clearInterval。假如手动运用了 addEventListener 绑定了事宜，也须要解绑事宜。

参考文章

• An Introduction to Life Cycle Events in React.js