摘要

记一次使用react-hooks中的useEffect()时，打印顺序异常

版本

• node：v16.20.2
• npm: 8.19.4
• yarn: 1.22.19
• react: ^18.2.0 （关键）

问题

代码：

useEffect(() => {
    // 类似componentDidMount（）
    console.log('useEffect before return:')
    return () => {
      // 
      console.log('useEffect return:')
    }
}, [])

期望组件初始化时，打印：

useEffect before return:

期望组件卸载时，打印：

useEffect return:

实际组件初始化时，打印：

useEffect before return:
useEffect return:
useEffect before return:

看起来组件像是被卸载又重新初始化了。

原因

严格模式

在React介绍严格模式有这样一句话：

从 React 18 开始的 严格模式 ，每当组件在开发中挂载时，React 会模拟立即卸载和重新挂载组件。

* React mounts the component.
   * Layout effects are created.
   * Effects are created.
* React simulates effects being destroyed on a mounted component.
   * Layout effects are destroyed.
   * Effects are destroyed.
* React simulates effects being re-created on a mounted component.
   * Layout effects are created
   * Effect setup code runs

关键点 ：

• React版本18
• 使用了严格模式
• 开发

<React.StrictMode>
  <HashRouter>
    <ConfigProvider>
      <App />
    </ConfigProvider>
  </HashRouter>
</React.StrictMode>