一张图看懂React生命周期

最新推荐文章于 2022-06-15 14:38:32 发布

weixin_34167819

最新推荐文章于 2022-06-15 14:38:32 发布

阅读量107

点赞数

文章标签： javascript python ViewUI

原文链接：https://my.oschina.net/kimyeongnam/blog/1845520

版权

2019独角兽企业重金招聘Python工程师标准>>>

一、创建时

componentWillMount

初始化组建，render方法之前执行，官方不建议做数据请求

componentDidMount

render方法之后执行，可以处理数据请求和 this.setState

二、存在时

componentWillReceiveProps(nextProps)

子组件的props属性变更时调用，可以在子组件的render函数执行前获取新的props，从而更新子组件自己的state。这样的好处是，可以将数据请求放在这里进行执行，需要传的参数则从 nextProps 中获取。而不必将所有的请求都放在父组件中。于是该请求只会在该组件渲染时才会发出，从而减轻请求负担。

shouldComponentUpdate(nextProps,nextState)

子组件的props和state变更时调用，可以在子组件的render函数执行前获取新的props和state，如果返回false可以阻止子组件render渲染，可以通过该方法进行一些优化。如下：

shouldComponentUpdate(nextProps,nextState){
      if(nextState.Number == this.state.Number){
        return false
      }
  }

componentWillUpdate

在组件接收到了新的props或者state 即将进行重新渲染前，该方法会被调用，（shouldComponentUpdate返回false时不执行）注意不要在此方面里再去更新props或者state

componentDidUpdate

在组件重新被渲染之后，它会被调用。可以在这里访问并修改DOM。可以做一些第三方插件的渲染，g2,echart等图标的重新渲染

三、销毁时

componentWillUnmout

随着一个组件从它的层级结构中被移除，这个组件的生命也算是走到了尽头，此时componentWillUnmout会被执行，提供一个让你做一些清理工作的机会。比如现在有一个组件，里面有一个循环执行的函数，当这个组件被销毁时，我们需要停止这个循环，否则会造成资源上的浪费，这个停止的语句就可以写在componentWillUnmout里。

转载于:https://my.oschina.net/kimyeongnam/blog/1845520