什么是react生命周期

React组件的生命周期根据广义定义描述，可以分为挂载、渲染和卸载这几个阶段，当渲染后的组件需要更新的时候，我们会重新去渲染组件，直到卸载。

1.生命周期总览

react的生命周期大概分为

● 组件装载（Mount）组件第一次渲染到Dom树

● 组件更新（update）组件state，props变化引发的重新渲染

● 组件卸载（Unmount）组件从Dom树删除

2.组件装载过程

● constructor： 在此初始化state，绑定成员函数this环境，props本地化

● componentWillMount： 预装载函数，不能进行修改state的操作，即使做了，也不会进行新数据状态的渲染。在该函数中做的操作，都可以提前到构造函数中。

● render： 渲染函数，唯一的一定不能省略的函数，必须有返回值，返回null或false表示不渲染任何DOM元素。它是一个仅仅用于渲染的纯函数，返回值完全取决于this.state和this.props，不能在函数中任何修改props、state、拉取数据等具有副作用的操作。render函数返回的是JSX的对象，该函数并不因为这渲染到DOM树，何时进行真正的渲染是有React库决定的。（setState是一个异步函数）

● componentDidMount： 挂载成功函数。该函数不会再render函数调用完成之后立即调用，因为render函数仅仅是返回了JSX的对象，并没有立即挂载到DOM树上，而componentDidMount是在组件被渲染到DOM树之后被调用的。另外，componentDidMount函数在进行服务器端渲染时不会被调用。

3.组件更新过程

当组件挂载到DOM树上之后，props/state被修改会导致组件进行更新操作。更新过程会以此调用如下的生命周期函数：

● componentWillReceiveProps(nextProps)： 该函数在组件进行更新以及父组件render函数（不管数据是否发生了改变）被调用后执行，this.props取得当前的props，nextProps传入的是要更新的props。通常是比较this.props和nextProps来重新setState。

● shouldComponentUpdate(nextProps, nextState)： 返回bool值，true表示要更新，false表示不更新，使用得当将大大提高React组件的性能，避免不需要的渲染。

● componentWillUpdate： 预更新函数。

● render： 渲染函数。

● componentDidUpdate： 更新完成函数。 相比装载过程的生命周期函数，更新过程的生命周期函数使用的相对来说要少一些。常用的是componentWillReceiveProps、componentShouldUpdate，前者经常用于根据前后两个数据去设置组件的状态，而后者则是常用于优化，避免不必要的渲染。

4.组件卸载过程

卸载过程只涉及一个函数componentWillUnmount，当React组件要从DOM树上删除前，会调用一次这个函数。这个函数经常用于去除componentDidMount函数带来的副作用，例如清除计时器、删除componentDidMount中创造的非React元素。

5.注意事项

setState

要修改state，只能使用this.setState()，不能使用this.state.value='myData' 类似方式设置state，一是不会驱动重新渲染，二是很可能被后面的操作替换，造成无法预知的错误。此外，React利用状态队列来实现setState的异步更新，避免频繁地重复更新state。当同时做了很多setState操作的时候，react会智能的合并成一个setState，当需要确定的setState完成后的操作，可以使用

setState({}, () => {
// 在这里进行state改变后的操作
})

setState的调用是有风险的，在某些生命周期函数中调用可能会无用甚至早恒循环调用导致崩溃。state的初始化一般在构造函数中实现；setState可以在装载过程的componentWillMount、componentDidMount中调用；setState可以在更新过程中的componentWillReceiveProps、componentDidUpdate中调用

render

render是一个异步函数，render执行后并不会直接生成Dom，而是生成虚拟Dom节点（模拟万博manbetx平台 Dom节点的一个javaScript数据结构），何时生成真实的DOM树取决于react框架本身的计算

本文来自React答疑栏目，欢迎学习！

以上就是什么是react生命周期的详细内容，更多请关注万博manbetx平台中文网其它相关文章！