react生命周期

react生命周期,一向只体贴本身经常使用的那几个,虽然基本能处置惩罚99%的题目,然则当被问到的时刻,说的不清不楚照样让我很忸捏,所以本日我就特地来梳理一下react的生命周期

1、componentWillMount()

  • 实行场景:render()实行之前
  • 细致: setState()不会触发re-render反复衬着,只实行一次

2、render()

  • 实行场景: componentWillMount() 今后/ componentWillReceive(nextProps, nextState)今后
  • 概况: 只能经由过程this.props,this.state接见数据不能修正、 可以反回null,false 或则任何React组件、
    不能转变组件状况、 不能修正Dom的输出
  • 注重:render
    要领反回的不是实在的Dom元素,而是一个假造的表现,类似于一个Dom-Tree的构造对象,react之所以效率高就是这个缘由

3、componentDidMount()

  • 实行场景:render()今后马上实行
  • 概况:可以对Dom举行操纵 一般在这里加载服务器数据 可以setState触发从新衬着 只实行一次

4、componentWillReceiveProps(nextProps)

  • 实行场景:在已挂载的组件吸收到新的props时触发,可以理解为除了第一次生命周期(componentWillMount ->
    render -> componentDidMount)今后的生命周期触发
  • 概况: 只有当从外部传入的props发作变化时才会触发,setState是不会触发的
  • 注重:
    因为组件可以会在props传入纵然没有发作转变也会触发从新衬着,所以假如你想本身处置惩罚转变最好对当前props值和下一次值举行比较,防止触发不必要的衬着

5、shouldComponentUpdate(nextProps,nextState)

  • 实行场景:在吸收新的props或许state时触发
  • 概况:这个函数的作用是为了让我们本身可以掌握组件是不是从新衬着从而优化组件,默许返回true示意须要从新衬着
  • 注重:初次衬着时不会触发, 函数假如返回false是不会触发从新衬着的(componentWillUpdata -> render -> componentDidUpdate)是不会被触发的

6、componentWillUpdate(nextProps, nextState)

  • 实行场景: props或state发作转变时,shouldComponentUpdata 返回true时触发
  • 注重:不可以在这里挪用setState 假如须要相应props可以到componentWillReceiveProps()中做相应

7、componentDidUpdate(prevProps, prevState)

  • 实行场景: 在componentWillUpdate -> render 今后
  • 注重: 该要领可以操纵Dom,然则组件初始时不会挪用

8、componentWillUnmount()

  • 实行场景:在组件卸载或烧毁之前挪用
  • 概况: 这个要领重要用于一些清算事情,比方无效的timers, interval, 或则作废收集要求
    清算任何componentWillMount()中建立的Dom元素。
    原文作者:哈哈哈
    原文地址: https://segmentfault.com/a/1190000018140193
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞