标准答案
- StrictMode 是开发期检查工具,不会渲染额外 DOM,也不会改变生产环境行为。
- 在开发环境中,React 可能会重复调用组件函数、state 初始化函数,或让 effect 经历一次额外的 setup 和 cleanup。
- 这样做是为了发现渲染阶段副作用、订阅未清理、请求未取消、状态初始化不纯等问题。
- 如果 effect 在严格模式下重复执行后出问题,通常说明副作用没有写成可清理、可重入的形式。
- 不要为了消除重复执行现象而关闭严格模式,应修正副作用边界或请求幂等逻辑。
题目解析
这道题要强调“开发环境”和“问题暴露”。严格模式不是线上 bug 的来源,而是在本地提前暴露隐藏问题。
常见现象是接口请求看起来发了两次。真正要检查的是请求是否应该放在 effect 中、是否有取消逻辑、是否能承受重试。
组件渲染函数必须保持纯粹,不应该在 render 阶段直接修改外部变量、发请求或写缓存。
代码示例
下面的 effect 可以安全清理订阅,即使严格模式下重建一次也不会泄漏。
TSX
useEffect(() => {
const unsubscribe = store.subscribe(() => {
forceUpdate()
})
return () => {
unsubscribe()
}
}, [])常见误区
- 把开发环境下的重复 effect 当成 React 生产 bug。
- effect 没有 cleanup,严格模式一重建就出现重复订阅或重复计时器。
- 为了不重复请求直接关闭 StrictMode,而不是检查请求和副作用是否可重入。