React 生命周期

React 生命周期方法

我们接触较多的应该是 render()方法，其实这也是React的生命周期方法之一。还有几个方法可以在React ES6类组件中被覆写。
现在已经知道能够用在ES6类组件中的生命周期方法 ：

• constructor() .和 render() .

1. constructor(构造函数) 只有在组件实例化 并插入到DOM节点中的时候才会被调用。
   组件实例化的过程称作组件的挂载（mount）.
2. render() 方法会在组件挂载的过程中被调用，同时组件更新的时候也会被调用。
   每当组件的状态（state）或者属性（props）改变时，组件的render（）方法都会被调用。

• react 有更多的生命周期方法。
  在组件挂载的过程中还有另外两个生命周期方法、：componentWillMount()和componentDid-Mount().
  构造函数(constructor)最先执行，componentWillMount()会在render()方法之前执行。
  思考：当组件的状态或者属性改变的时候用来更新组件的生命周期是什么样的呢？
  总的来说，一共有5个生命周期方法用于组件的更新，调用顺序如下:

  1. componentWillReceiveProps()
  2. shouldComponentUpdate()
  3. componentWillUpdate()
  4. render()
  5. componentDidUpdate()

  最后但同样重要的 组件卸载也有生命周期 。 只有一个生命周期方法 ：componentWillUn-mount()。

• 即使在一个很大的React应用中，除了constructor() 和render() 比较常用外，你只会用到一小部分生命周期函数

  • constructor(props) 它在组件初始化时被调用。在这个方法中，你可以设置初始化状态及绑定类方法。
  • componentWillMount() 它在render() 方法之前被调用。这就是为什么它可以用作去设置组件内部的状态，因为它不 会触发组件的再次渲染。但一般来说 推荐 在constructor()中初始化状态。
  • render() 这个生命周期方法是必须有的，它返回作为组件输出的元素。这个方法应该是一个纯函数，因此不应该在这个方法中修改组件的状态。它把属性和状态作为输入并且返回（需要渲染的）元素。
  • componentDidMount() 它仅在组件挂载后执行一次。这是发起异步请求去API获取数据的绝佳时期。获取到的数据将被保存在内部组件的状态中 然后在render()生命周期方法中展现出来。
  • componentWillReceiveProps(nextProps) 这个方法在一个更新生命周（update lifecycle）中被调用。新的属性会作为它的输入。因此你可以利用this.props来对比之后的属性和之前的属性。基于对比的结果去实现不同的行为。此外，你可以基于新的属性来设置组件的状态。
  • shouldComponentUpdate(nextProps,nextState) 每次组件因为状态或者属性更改而更新时，它都会被调用。你将在成熟的React应用中使用它来进行性能优化。在一个更新生命周期中，组件及其子组件将根据该方法返回的布尔值来决定是否重新渲染。这样你可以阻止组件的渲染生命周期（render lifecycle）方法，避免不必要的渲染。
  • componentWillUpdate(nextProps,nextState) 这个方法是render()执行之前的最后一个方法。你已经拥有了下一个属性和状态，他们可以在这个方法中任由你处置。你可以利用这个方法在渲染之前进行最后的准备。 注意：在这个生命周期方法中你不能触发seState(). 如果想基于新的属性计算状态，你必须利用 --> componentWillReceiveProps（）；
  • componentDidUpdate(prevProps,prevState) 这个方法在render()之后立即调用。你可以用它当成操作DOM 或者执行更多异步请求的机会。
  • componentWillUnmount() 它会在组件销毁之前被调用。 你可以利用这个生命周期方法去执行任何清理任务。

之前可能你已经用过了 constructor() 和 render() 生命周期方法。对于 ES6 类组件来说他们是 常用的生命周期方法。实际上 render() 是必须有的，否则它将不会返回一个组件实例。

• 还有一个 生命周期方法 ：componentDidCatch(error,info) . 它在React16 中引入 。用来捕获组件的错误。

参考资料

the road to learn react http://leanpub.com/the-road-to-learn-react-chinese/ by Robin Wieruch and JimmyLv