React新旧生命周期区别对比React生命周期是非常重要的内容，根据官网的区分，以16.4版本为分界线有新旧生命周期，

发布时间：2024-12-07 19:27

游戏更新是游戏生命周期管理的一部分，有助于维持游戏的生命周期和盈利能力。 #生活乐趣# #游戏乐趣# #游戏更新#

React生命周期是非常重要的内容，根据官网的区分，以16.4版本为分界线有新旧生命周期，下面先引用新旧生命周期的两张图

生命周期（旧）

生命周期（新）

生命周期（旧）

旧的生命周期执行顺序总体如下

一、挂载

constructor() componentWillMount() render() componentDidMount

二、更新

componentWillReceiveProps (nextProps) shouldComponentUpdate（nextProps,nextState） componetnWillUpdate（nextProps,nextState） render（） componentDidUpdate（prevProps,precState,snapshot）

三、卸载

componentWillUnmount()

生命周期（新）

新的生命周期执行顺序总体如下

一、挂载

constructor() static getDerivedStateFromProps（props，state） render() componentDidMount

二、更新

static getDerivedStateFromProps（props，state） shouldComponentUpdate（nextProps,nextState） getSnapshotBeforeUpdate（prevProps,prevState） render（） componentDidUpdate（prevProps,precState,snapshot）

三、卸载

componentWillUnmount()

总结与详述

总体来说新旧生命周期的最明显表面差异就是 “加2减3”

即增加了static getDerivedStateFromProps和getSnapshotBeforeUpdate

去除了三个Will:componentWillMount、componentWillReceiveProps、componentWillUpdate

下面对生命周期每一个钩子进行描述：

constructor

react的组件在挂载之前会调用它的构造函数，通常可以接受props和context,注意需要在super传入参数

constructor(props) { super(props); }

componentWillMount

render前最后一次修改状态的机会，在服务端渲染唯一会调用的函数，代表已经初始化数据但是没有渲染dom，因此在此方法中同步调用 setState() 不会触发额外渲染。

getDerivedStateFromProps

调用 render 方法之前调用，并且在初始挂载及后续更新时都会被调用。适用于第一次的初始化组件以及后续的更新过程中(包括自身状态更新以及父传子) ，该方法若返回一个对象作为新的state，返回null则说明不需要在这里更新state，若state的值在任何时候都取决于props，则可以使用

static getDerivedStateFromProps(nextProps, prevState) { const {type} = nextProps; // 当传入的type发生变化的时候，更新state if (type !== prevState.type) { return { type, }; } // 否则，对于state不进行任何操作 return null; }

render

class组件中唯一必须实现的方法。

componentDidMount

在组件挂载后（插入到dom树中）后立即调用,成功render并渲染完成真实Dom之后触发，可以修改Dom

可以在这里调用Ajax请求，返回的数据可以通过setState使组件重新渲染，或者添加订阅，但是要在conponentWillUnmount中取消订阅

componentWillReceiveProps

在已挂载的组件接收新的props之前调用，通过对比nextProps和this.props，将nextProps的state为当前组件的state，从而重新渲染组件，可以在此方法中使用this.setState改变state。

componentWillReceiveProps (nextProps) { nextProps.openNotice !== this.props.openNotice&&this.setState({ openNotice:nextProps.openNotice }，() => { console.log(this.state.openNotice:nextProps) //将state更新为nextProps,在setState的第二个参数（回调）可以打印出新的state }) }

组件只会在组件的 props 更新时调用此方法。调用 this.setState() 通常不会触发该生命周期。

shouldComponentUpdate

当 props 或 state 发生变化时，shouldComponentUpdate() 会在渲染执行之前被调用。默认返回为true,返回false则阻止更新

控制组件自身或者子组件是否需要更新，尤其在子组件非常多的情况下

主要用于性能优化，会对 props 和 state 进行浅层比较，并减少了跳过必要更新的可能性。不建议深层比较，会影响性能

componentWillUpdate

当组件接收到新的props和state会在渲染前调用，初始渲染不会调用该方法。不能在这使用setState

getSnapshotBeforeUpdate

在最后一次渲染（提交到dom节点）之前调用，它能在组件更改之前获取dom的节点信息（滚动位置），该方法所有返回值都会作为参数传给componentDidUpdate

在 React 开启异步渲染模式后，在 render 阶段读取到的 DOM 元素状态并不总是和 commit 阶段相同，这就导致在 componentDidUpdate 中使用 componentWillUpdate 中读取到的 DOM 元素状态是不安全的，因为这时的值很有可能已经失效了。

getSnapshotBeforeUpdate 会在最终的 render 之前被调用，也就是说在 getSnapshotBeforeUpdate 中读取到的 DOM 元素状态是可以保证与 componentDidUpdate 中一致的。

如果组件实现了 getSnapshotBeforeUpdate() 生命周期（不常用），则它的返回值将作为 componentDidUpdate() 的第三个参数 “snapshot” 参数传递。否则此参数将为 undefined。

通常可以应用于滚动条与当前视口的无差无感应复位

//新的数据不断插入数据前面，导致我正在看的数据向下走，如何保持可视区依旧是我之前看的数据呢？ getSnapshotBeforeUpdate(){ return this.refs.wrapper.scrollHeight } componentDidUpdate(prevProps, prevState,preHeight) { //if(preHeight===200)return ; this.refs.wrapper.scrollTop +=this.refs.wrapper.scrollHeight-preHeight } <div style={{height:"200px",overflow:"auto"}}} ref="wrapper"> <ul> ......... </ul> </div>

componentDidUpdate

可以在该方法调用setState，但是要包含在条件语句中，否则一直更新会造成死循环例如：当组件更新后，可以在此处对 DOM 进行操作。如果对更新前后的props进行了比较，可以进行网络请求。（当 props 未发生变化时，则不会执行网络请求）。

componentDidUpdate(prevProps) { // 典型用法（不要忘记比较 props）： if (this.props.userID !== prevProps.userID) { this.fetchData(this.props.userID); } }

componentWillUnmount

在组件卸载和销毁之前调用,在这执行必要的清理操作，例如，清除timer（setTimeout,setInterval），取消网络请求，或者取消在componentDidMount的订阅，移除所有监听

网址：React新旧生命周期区别对比React生命周期是非常重要的内容，根据官网的区分，以16.4版本为分界线有新旧生命周期， https://www.yuejiaxmz.com/news/view/407112

上一篇：海尔智家：旧家电，新生命丨艾肯家

下一篇：【react全家桶学习】reac