React 18 严格模式模拟渲染：类组件生命周期如何变化？

react 18 严格模式下模拟渲染的困惑

React 18 严格模式引入了一次模拟渲染，导致类组件的生命周期发生变化，产生了一些困惑。

模拟渲染对生命周期的影响

模拟渲染发生在组件第一次挂载之前，此时会执行 constructor 方法，但不会执行 componentDidMount 方法。这会导致一个有趣的情况：

• 初次渲染：constructor -> componentDidMount
• 模拟渲染：constructor -> componentWillUnmount -> constructor -> componentDidMount

对象初始化的困惑

由于模拟渲染会先初始化一次对象（例如 this.ob），然后在第一次卸载时重置它，当第二次初始化时它就会被重置为 null。这会导致第二次渲染时使用该对象时报错。

解决方案

为避免这个问题，你可以采取以下解决方案：

• 将对象初始化移动到 componentDidMount 中：这样做确保对象只在首次渲染时初始化。
• 使用新的生命周期方法 getDerivedStateFromProps 或 getSnapshotBeforeUpdate：这两个方法在每次渲染前都会被调用，适合用于初始化对象。

以上就是React 18 严格模式模拟渲染：类组件生命周期如何变化？的详细内容，更多请关注其它相关文章！