有关react的思考之生命周期

生命周期的8个方法：

 

1 componentWillMount()

• 执行场景
  • 在render()方法之前
• 解释
  • 1 因为componentWillMount是在render之前执行，所以在这个方法中setState不会发生重新渲染(re-render);
  • 2 这是服务端渲染(server render)中唯一调用的钩子(hook);
  • 3 通常情况下，推荐用constructor()方法代替;

2 render()

• 执行场景
  • 1 在componentWillMount()方法之后
  • 2 在componentWillReceive(nextProps, nextState)方法之后
• 解释
  • ==

3 componentDidMount()

• 执行场景
  • 在render()方法之后
• 解释
  • 1 这个方法会在render()之后立即执行；
  • 2 这里可以对DOM进行操作，这个函数之后ref变成实际的DOM(@TODO 表述可能不清晰);
  • 3 这里可以加载服务器数据，并且如果使用了redux之类的数据服务，这里可以出发加载服务器数据的action;
  • 4 这里可以使用setState()方法触发重新渲染(re-render);

4 componentWillReceiveProps(nextProps)

• 执行场景
  • 在已经挂在的组件(mounted component)接收到新props时触发;
  • 简单的说是在除了第一次生命周期(componentWillMount -> render -> componentDidMount)之后的生命周期中出发;
• 解释
  • 1 如果你需要在props发生变化(或者说新传入的props)来更新state，你可能需要比较this.props和nextProps, 然后使用this.setState()方法来改变this.state;
• 注意
  • 1 React可能会在porps传入时即使没有发生改变的时候也发生重新渲染, 所以如果你想自己处理改变，请确保比较props当前值和下一次值; 这可能造成组件重新渲染;
  • 2 如果你只是调用this.setState()而不是从外部传入props, 那么不会触发componentWillReceiveProps(nextProps)函数；这就意味着: this.setState()方法不会触发componentWillReceiveProps(), props的改变或者props没有改变才会触发这个方法;

5 shouldComponentUpdate(nextProps, nextState)

• 执行场景
  • 在接收到新props或state时，或者说在componentWillReceiveProps(nextProps)后触发
• 解释
  • 在接收新的props或state时确定是否发生重新渲染，默认情况返回true，表示会发生重新渲染
• 注意
  • 1 这个方法在首次渲染时或者forceUpdate()时不会触发;
  • 2 这个方法如果返回false, 那么props或state发生改变的时候会阻止子组件发生重新渲染;
  • 3 目前，如果shouldComponentUpdate(nextProps, nextState)返回false, 那么componentWillUpdate(nextProps, nextState), render(), componentDidUpdate()都不会被触发;
  • 4 Take care: 在未来，React可能把shouldComponentUpdate()当做一个小提示(hint)而不是一个指令(strict directive)，并且它返回false仍然可能触发组件重新渲染(re-render);
• Good Idea
  • 在React 15.3以后, React.PureComponent已经支持使用，个人推荐，它代替了(或者说合并了)pure-render-mixin，实现了shallowCompare()。

6 componentWillUpdate(nextProps, nextState)

• 执行场景
  • 在props或state发生改变或者shouldComponentUpdate(nextProps, nextState)触发后, 在render()之前
• 解释
  • 1 这个方法在组件初始化时不会被调用;
• 注意
  • 1 千万不要在这个函数中调用this.setState()方法.;
  • 2 如果确实需要响应props的改变，那么你可以在componentWillReceiveProps(nextProps)中做响应操作;
  • 3 如果shouldComponentUpdate(nextProps, nextState)返回false，那么componentWillUpdate()不会被触发;

7 componentDidUpdate(prevProps, prevState)

• 执行场景
  • 在发生更新或componentWillUpdate(nextProps, nextState)后
• 解释
  • 1 该方法不会再组件初始化时触发;
  • 2 使用这个方法可以对组件中的DOM进行操作;
  • 3 只要你比较了this.props和nextProps，你想要发出网络请求(nextwork requests)时就可以发出, 当然你也可以不发出网络请求;
• 注意
  • 如果shouldComponentUpdate(nextProps, nextState)返回false, 那么componentDidUpdate(prevProps, prevState)不会被触发;

8 componentWillUnmount()

• 执行场景
  • 在组件卸载(unmounted)或销毁(destroyed)之前
• 解释
  • 这个方法可以让你处理一些必要的清理操作，比如无效的timers、interval，或者取消网络请求，或者清理任何在componentDidMount()中创建的DOM元素(elements);

父子组件嵌套后的生命周期

App rerender
son1 rerender
GrandSon1 rerender

GrandSon1 mount
Son1 mount
App mount

App will update
App rerender
son1 will update
son1 rerender
 GrandSon1 will update
 GrandSon1 rerender
GrandSon1 did update
 son1 did update
App did update

render（）方法是：一旦开始，就执行render组件，在这个案例中，祖辈组件render()先执行，最后执行孙辈render();

Didmount方法在完全挂载之后才执行：孙组件先执行Didmount，最后执行祖辈组件Didmount，

willupdate 方法也是：一旦有更新就执行。

Didupdate是完全更新完之后才执行。