useEffect重复调用两次的坑

前言

在项目开发过程中，遇到一个问题：

useEffect(() => { 
  console.log(1)
  return () => {
    console.log(2)
  }
}, [])

执行上述代码，React 组件挂载完成后，打印了 1 2 1。这意味着 useEffect 被连续调用了 2 次，这是不符合 useEffect 触发条件的。后续找到了上述文章：罪魁祸首就是 React 脚手架自带的 StrictMode 模式。

React 严格模式 StrictMode

定义

StrictMode 是一个用来突出显示应用程序中潜在问题的工具。与 Fragment 一样，StrictMode 不会渲染任何可见的 UI。它为其后代元素触发额外的检查和警告。

作用

StrictMode 目前有助于：

识别不安全的生命周期
关于使用过时字符串 ref API的警告
关于使用废弃的 findDOMNode 方法的警告
检测意外的副作用
检测过时的 context API
确保可复用的状态

副作用

严格模式不能自动检测到你的副作用，但它可以帮助你发现它们，使它们更具确定性。通过 故意重复调用（注意这里） 以下函数来实现的该操作：

class 组件的 constructor，render 以及 shouldComponentUpdate 方法
class 组件的生命周期方法 getDerivedStateFromProps
函数组件体
状态更新函数 (即 setState 的第一个参数）
函数组件通过使用 useState，useMemo 或者 useReducer

看到其中的函数组件体，一切都真相大白了。原因就是react脚手架启动的项目默认会用严格模式包裹，而包裹后会使组件被调用两次。

在后面还解释了对于结果中那行打印出的浅灰色的---App---也给出了说明：注意：在 React 17 中，React 会自动修改 console 的方法，例如 console.log()，在第二次调用生命周期函数时，将日志静默。然而，在某些情况下，这可能会导致一些不符合期望的行为发生，此时可以使用替代解决方案。从 React 18 开始，React 不会抑制任何日志。不过，如果你安装了 React Dev Tools，第二次调用的日志会出现被轻微淡化。React DevTools 也提供了一个设置（默认关闭）来完全抑制它们。

React StrictMode 严格模式只在开发模式下运行不会影响生产构建。

jtwang7 / React-Note

useEffect重复调用两次的坑 #58

useEffect重复调用两次的坑

前言

React 严格模式 StrictMode

定义

作用

副作用