标准答案

  1. StrictMode 是开发期检查工具,不会渲染额外 DOM,也不会改变生产环境行为。
  2. 在开发环境中,React 可能会重复调用组件函数、state 初始化函数,或让 effect 经历一次额外的 setup 和 cleanup。
  3. 这样做是为了发现渲染阶段副作用、订阅未清理、请求未取消、状态初始化不纯等问题。
  4. 如果 effect 在严格模式下重复执行后出问题,通常说明副作用没有写成可清理、可重入的形式。
  5. 不要为了消除重复执行现象而关闭严格模式,应修正副作用边界或请求幂等逻辑。

题目解析

这道题要强调“开发环境”和“问题暴露”。严格模式不是线上 bug 的来源,而是在本地提前暴露隐藏问题。

常见现象是接口请求看起来发了两次。真正要检查的是请求是否应该放在 effect 中、是否有取消逻辑、是否能承受重试。

组件渲染函数必须保持纯粹,不应该在 render 阶段直接修改外部变量、发请求或写缓存。

代码示例

下面的 effect 可以安全清理订阅,即使严格模式下重建一次也不会泄漏。

TSX
useEffect(() => {
  const unsubscribe = store.subscribe(() => {
    forceUpdate()
  })

  return () => {
    unsubscribe()
  }
}, [])

常见误区

  • 把开发环境下的重复 effect 当成 React 生产 bug。
  • effect 没有 cleanup,严格模式一重建就出现重复订阅或重复计时器。
  • 为了不重复请求直接关闭 StrictMode,而不是检查请求和副作用是否可重入。

作者信息