学习使用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
之前会触发的,这时候我们要进行时间监听函数的移除,还有计时器的移除,也是一个非常常用的函数。
感觉经常回顾基础知识是一个很好的总结。
网友评论