美文网首页
React——组件生命周期

React——组件生命周期

作者: baxiamali | 来源:发表于2016-10-14 15:22 被阅读0次

    学习使用ReactJS已经有一段时间了,带着做项目的一些经验回顾了一下React的基本入门知识。再看一遍的感觉很不一样,尤其是对组件的生命周期,有了更加直观的理解。这一篇就来介绍一个React使用中非常关键的一个知识点,组件的生命周期。

    组件的生命周期可以分为三个阶段,初始化阶段、运行中阶段和销毁阶段。在代码中我们主要关注的是各个阶段中调用的hook函数。

    初始化阶段

    1.getDefaultProps 这个函数只会调用一次,在组件的实例中共享引用,可以对属性进行初始化的设置。这个我在平时的代码中使用的比较少。

    2.getInitialState 这个函数是初始化每个实例的特有状态,不同于getDefaultProps,每个实例都会进行调用。这个函数在代码中的应用就是设置组件的初始化状态,比如是否loading等等。

    3.componentWillMount 这个函数是程序员在render前最后一次修改状态的机会。

    4.render 这个函数会去渲染DOM,在这个函数中可以访问属性(props)和状态(state)。

    5.componentDidMount 这个函数也是经常用到的,这时DOM已经渲染完成,可以对DOM进行修改,可以加一些我们需要的监听函数。

    以上的5个函数是按照组件渲染的时间顺序排序的。

    运行中阶段

    1.componentWillReceiveProps 可以在这个函数中修改新的属性和状态,这个函数应用也比较多,可以根据接受到的属性来对组件进行不同的控制。

    2.shouldComponentUpdate 如果这个函数 return false 那么他会阻止render的调用,省去了diff算法,可以提高性能。但是一般不是特别建议使用这个函数,用不好的话会出现一些难以排查的问题。

    3.componentWillUpdate 这个函数不同于componentWillReceiveProps,不可以进行属性和状态的修改。

    4.render 和初始化阶段一样,会在组件接收到新的属性的时候进行调用。重新渲染。

    5.componentDidUpdate 可以在这个函数里面修改DOM。这个函数有个经常出现的错误,就是在这个函数中进行setState的操作,这样会引起无限循环的问题,最终导致栈溢出,使用时一定要牢记。

    销毁阶段

    1.componentWillUnmount 销毁阶段只有这一个hook函数,这个是组件被移除DOM之前会触发的,这时候我们要进行时间监听函数的移除,还有计时器的移除,也是一个非常常用的函数。

    感觉经常回顾基础知识是一个很好的总结。

    相关文章

      网友评论

          本文标题:React——组件生命周期

          本文链接:https://www.haomeiwen.com/subject/ussvyttx.html