” 想学好 React 一定要搞明白生命周期 ” –沃兹基·卞德
想必刚接触 React 的童靴们一定对生命周期理解的云里雾里的,只看 api 是万万不能够的,在这里本人分享一下关于生命周期的一些理解。
首先先抛出个概念,React 组件的生命周期分为三个阶段:挂载阶段
,更新阶段
,卸载阶段
在 v16 中添加了新的生命周期 componentDidCatch
,在文章末尾会详细解释。
一般的来说在一个组件完整的生命周期中 挂载阶段
(v16之后render前可能被执行多次) 和 卸载阶段
只会执行一次,而 更新阶段
会执行 N 次。
constructor 初始化
初始化作为最常用的生命周期函数,其功能为初始化 props
,state
以及函数成员的 this
指向绑定问题。在 React 早期版本使用 React.createClass
创建组件时 需要使用getDefaultProps
和 getInitialState
,es6
中直接使用类的构造函数 constructor
。
拓展学习链接:阮老师:class的基本用法
// 代码片段
constructor(props) {
super(props)
this.state = {
value: ''
}
this.handleChange = this.handleChange.bind(this)
}
componentWillMount
中文名为 组件将要挂载
,是我们前端在 React
中最少用到生命周期函数。此函数特殊的是,可以在服务器端调用,虽然 facebook 不倡导服务器端渲染,但是还是创造了这个函数。需要值得注意的一点是,如果在此函数内进行了阻塞线程的事,很有可能用户会白屏。
还有一点就是 React 在 v16 版本以后,将 render
作为一个分水岭,render
之前为新推出的 Fibber
机制进行管理。就是说 React 会根据优先级来安排任务,会导致任务实现一半但是因为优先级原因放弃任务。所以说在此声明周期内可能会出现多次调用。如果要定制改函数,最好写成 纯函数
,这样不管调用多少次,输出结果都是根据输入来决定的。
render
render
是生命周期里唯二需要返回值的函数,也是最重要必须要写的函数。render
的返回值为 JSX
代码,如果单纯的逻辑型组件没有需要返回的 JSX
可以直接 return null
。在函数内返回的 JSX
标签并不会真正的挂载到 dom
当中去,而是会被 React.createElement
调用,产生 虚拟 DOM
保存在内存中。
componentDidMount
此函数位于 render
之后,页面上已经有 dom
结构了,所以在此可以进行 ajax
请求来获取数据填充页面。也可以进行一些 dom
操作,例如使用 jQuey
等等。需要注意的点是:componentDidMount
并不是在 render
之后被立刻调用,而是当真正的 dom
渲染之后再会被调用,这也使我们可以放心的使用 dom
操作了。