react 设计哲学 | 严格模式

前言

官方介绍 详细解释了在 React 18+ 环境下严格模式的行为（包括双重渲染和双重 Effect）

组件 “双闪” 现象

当你使用 react 18+ 开发环境中使用 useEffect 开发的过程中是否遇到过定时器跑倍数或者内存泄露的问题？

例如: 下面的代码，你觉得页面中定时器显示的值应该是多少？

import { useState, useEffect } from 'react'

function TimerFunction() {
  const [count, setCount] = useState(0)

  useEffect(() => {
    console.log('[Effect] 开启定时器')
    setInterval(() => {
      setCount((c) => c + 1)
    }, 1000)
  }, [])

  return <div>计数：{count}</div>
}

export default TimerFunction

直接揭晓答案，在严格模式下，当组件一加载，后台有两个定时器在跑，count 的值会成倍的增加。这里也是初学者容易困惑的地方，在严格模式下，组件会模拟 挂载 -> 卸载 -> 重新挂载 的过程。这里相当于初始化的时候页面挂载了两个定时器，所以也就解释了为什么看到的 count 的值是成倍增加的。

为什么要这样做？

react 团队之在 react 18 中强制加入严格模式，这是由于很多开发者在非严格模式下测试时，觉得“首次加载没有问题，就忽略了清理函数”，导致用户在当前页面停留时间过长，切换的页面越多，电脑越卡。而这种 bug 往往又很难发现，往往到了生产环境，用户反馈 “页面卡顿” 你才会意识到内存泄露了。

所以记得添加清理函数哦！！

import { useState, useEffect } from 'react'

function TimerFunction() {
  const [count, setCount] = useState(0)

  useEffect(() => {
    console.log('[Effect] 开启定时器')
    const timer = setInterval(() => {
      setCount((c) => c + 1)
    }, 1000)

    // 这是函数组件的“生命周期清理”
    return () => {
      console.log('[Cleanup] 清理定时器')
      clearInterval(timer)
    }
  }, [])

  return <div>计数：{count}</div>
}

export default TimerFunction

我应该开启它吗？

答案是肯定的，虽然这样做会让你的log翻倍，但是可以提前帮你排查代码的逻辑漏洞和潜在风险，同时着严格模式在构建的过程中自动失效，所有不用担心生产环境影响用户的性能。

结余

react 的严格模式更像是对开发者的一种 “善意的怀疑”，借用苏格拉底的一句话，“我唯一知道的，就是我一无所知”。