聊一聊，React 组件的生命周期

[george-es]

React 组件的生命周期有三个阶段，挂载，更新，卸载，而我们在官网看到的那些是每个阶段的钩子函数

要记住

组件的挂载是指将组件渲染并构造 DOM 元素，然后插入页面的过程

了解了 JSX 原理，我们知道

ReactDOM.render(
 	<Test />,
    document.getElementById('root')
)

会编译成

ReactDOM.render(
	React.createElement(Test, null),
	document.getElementById('root')
)

我们把 Test 组件传给 React.createElement，又把函数返回的结果传递给 ReactDOM.render，想下里面的原理是什么呢？

// React.createElement 中实例化 Test
const test = new Test(props, children)
// React.createElement 中调用 test.render 方法渲染组件的内容
const testJsxObject = test.render()

// ReactDOM 用渲染后的 JavaScript 对象来来构建真正的 DOM 元素
const testDOM = createDOMFromObject(testJsxObject)
// ReactDOM 把 DOM 元素塞到页面上
document.getElementById('root').appendChild(testDOM)

react 内部对每个组件都有这么一个过程，也就是初始化组件 -> 挂载页面的过程

那么我们在里面注入一些函数，去掌控组件的每个阶段，这就有了所谓的生命周期钩子

挂载

constructor()
static getDerivedStateFromProps()
render()
componentDidMount()

更新

static getDerivedStateFromProps()
shouldComponentUpdate()
render()
getSnapshotBeforeUpdate()
componentDidUpdate()

卸载

componentWillUnmount()

错误处理

static getDerivedStateFromError()
componentDidCatch()

一般来说，所有有关组件自身的状态初始化工作都会放在 constructor 里面

像组件启动动作，包括 ajax 数据拉取，定时器启动等，就会放在 componentDidMount 里面

清除数据，定时器清理，会放在 componentWillUnmount 里面