React 初探（七）- 生命周期

概述

React 有一些生命周期钩子，可以让开发者在适当的时候插入自己的代码。那 React 生命周期中有哪些钩子函数呢？

demo

首先写一个简单的 demo

1. create div

   
   create div

2. mount div

   
   mount div

3. update div

   
   update div

4. destroy div

   
   destroy div

这四个状态便表示了一个 div 的整个生命周期，React 也不例外

React 生命周期

React 生命周期
上图便是创建一个组件的过程。React 生命周期 demo

何时 setState

1. 不能在 mount 之前 setState，即不能在 constructor、componentWillMount 和 render 中 setState
2. 不能在 componentWillUpdate 和 componentDidUpdate 中 setState，反复调用，栈溢出
3. 可以在 componentDidMount 、 componentWillUnmount 和 componentWillReceiveProps 中 setState

shouldComponentUpdate

shouldComponentUpdate(nextProps, nextState)

使用 shouldComponentUpdate 以让 React 知道当前状态或属性的改变是否不影响组件的输出。默认行为是在每一次状态的改变重新渲染，在大部分情况下你应该依赖于默认行为。

当接收到新属性或状态时，shouldComponentUpdate 在渲染前被调用。默认为 true。该方法并不会在初始化渲染或当使用 forceUpdate() 时被调用。

若 shouldComponentUpdate() 返回 false，而后 componentWillUpdate、render() 和 componentDidUpdate 将不会被调用。

返回的参数 nextProps 和 nextState 是即将更新的数据，this.state 是旧的数据

shouldComponentUpdate 允许我们手动地判断是否要进行组件更新，根据组件的应用场景设置函数的合理返回值能帮我们避免不必要的更新

shouldComponentUpdate demo

在生命周期中的哪一步应该发起 AJAX 请求

需要将 AJAX 请求放到 componentDidMount 函数中执行，主要原因如下：

• 在 constructor 函数中不能使用 setState

• 在 componentWillUnmount 中无法确保在执行 render 前已经获得了异步请求的数据，componentDIdMount 不存在这个问题

• 为了性能的需要，FIber 有了调度 render 执行顺序的能力，所以 componentWillMount 函数的执行变得不确定了

• 无法保证 AJAX 请求在组件的更新阶段里成功返回数据，有可能当我们进行 setState 处理的时候，组件已经被销毁了

setState 的时候会调用哪些生命周期函数

shouldComponentUpdate + componentWillUpdate + render + componentDidUpdate