React 生命周期

从印度回来后学了 React 那么久,居然从来没有仔细去看过 React 的生命周期。还是今天被问到的时候,才知道了。

犹记得有那么一段时间,手机的锁屏还是


当年的手机锁屏.png

然而今天并没有完整的说出这所有的过程(按照顺序),分分钟打脸了。

事实上,React 的生命周期主要分为三个过程:装载过程,更新过程,以及卸载过程。

装载过程

把组件第一次在 DOM 树种渲染的过程

image.png
  • getDefaultProps()
    用来设置组件属性的默认值,在组件被建立时就会立即调用,所有实例都可以共享这些属性。
  • getInitialState()
    用于定义初始状态。
  • componentWillMount()
    只在初始化时候被调用一次,可以使用 setState 方法,会立即更新 state,然后会进行 render
  • render()
    render 中使用 setState 方法会报错。若其中包含其他的子组件,那么子组件的生命周期才开始进行
  • componentDidMount()
    在子组件也都加载完毕后执行,DOM 渲染完成,此时就可以操作 DOM 了。但是由于 React 中的 DOM 是虚拟 DOM,因此不推荐操作 DOM。

更新过程

组件被重新渲染的过程

更新过程分为 props 发生改变和 state 发生改变

  1. props 发生改变
  • componentWillReceiveProps(nextProps)
  • shouldComponentUpdate(nextProps, nextState)
  • componentWillUpdate(nextProps, nextState)
  • render()
  • componentDidUpdate(prevProps, prevState)
  1. state 发生改变
  • shouldComponentUpdate(nextProps, nextState)
  • componentWillUpdate(nextProps, nextState)
  • render()
  • componentDidUpdate(prevProps, prevState)

其中,

  • shouldComponentUpdate(nextProps, nextState)
    该方法决定了一个组件什么时候不需要渲染,返回一个布尔值。告诉 React 这个组件在这次更新过程中是否要继续。
    shouldComponentUpdate(nextProps, nextState)

通常在该方法中比较当前的 state,props 和 nextState,nextProps 来进行比较。返回 true 或 false 来渲染组件,优化性能

  • componentWillUpdate(nextProps, nextState)
    在 state 改变或 shouldComponentUpdate 返回 true 后出发

  • componentDidUpdate(prevProps, prevState)
    会等子组件也都更新完后才触发

卸载过程

组件从 DOM 中删除的过程

image.png
  • componentWillUnmount()
    该方法与 componentDidMount 有关,例如:在 componentDidMount 中用非 React 的方法创造一些 DOM 元素,如果不管可能会造成内存泄漏,因此需要 componentWillUnmount 中把这些创造的 DOM 元素清理掉。

注意
不要在 shouldCompoentUpdate、componentWillUpdate、componentDidUpdate,以及 render 中使用 setState。


The End ~
21 天写作训练,第 8 天 ing

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 组件的生命周期方法分以下三个阶段。 Mounting当创建组件的实例并将其插入到DOM中时,将调用这些方法:con...
    _八神光_阅读 1,119评论 0 0
  • Each component has several "lifecycle methods" that you c...
    暮落晨曦阅读 484评论 0 0
  • 好比我们人除了短暂的生与死那一瞬之外,生命中剩下的时间都用在了每天活着的状态,对于React中的组件来讲,占其总生...
    YeLqgd阅读 10,532评论 0 7
  • 又是一个老生常谈的内容,从ES6起已经开始使用class的方式去创建组件,这种创建方式上的变化也带来了写法和方法上...
    殷灬商阅读 466评论 0 1
  • 译自 React Component Lifecycle 每个组件都有若干生命周期函数。如函数名称所示,带有wil...
    KrisLeeSH阅读 564评论 0 0