useEffect 初始化的时候执行两次

Question

如题，希望老师能讲解一下

Answer 1

河畔一角 2023-05-25 11:33:13

你回复的非常好。

非严格模式

* React mounts the component. //挂载组件

* Layout effects are created. //layout执行

* Effects are created. //Effects执行

严格模式

* React mounts the component. //挂载组件

* Layout effects are created. //layout执行

* Effect effects are created. // Effects执行

* React simulates effects being destroyed on a mounted component. //React模拟组件销毁

* Layout effects are destroyed. // layout销毁

* Effects are destroyed. // Effects销毁

* React simulates effects being re-created on a mounted component. // React模拟重新挂载

* Layout effects are created // layout重新创建

* Effect setup code runs // Effect重新执行

在严格模式下，更新机制略有不同，所以我们通常会把严格模式删除。

• 提问者 核桃丷 #1

  明白了老师

Answer 2

提问者 核桃丷 2023-05-25 10:01:26

1.这是 React18 才新增的特性。 2.仅在开发模式("development")下，且使用了严格模式("Strict Mode")下会触发。  生产环境("production")模式下和原来一样，仅执行一次。 3.之所以执行两次，是为了模拟立即卸载组件和重新挂载组件。  为了帮助开发者提前发现重复挂载造成的 Bug 的代码。  同时，也是为了以后 React的新功能做铺垫。  未来会给 React 增加一个特性，允许 React 在保留状态的同时，能够做到仅仅对UI部分的添加和删除。  让开发者能够提前习惯和适应，做到组件的卸载和重新挂载之后， 重复执行 useEffect的时候不会影响应用正常运行。

Answer 3

提问者 核桃丷 2023-05-25 09:55:29

function App() {
    const [count, setCount] = useState(0)
    useEffect(() => {
        // setCount(count + 1)
        // setCount(count + 1)
        setCount(count => count + 1)
        setCount(count => count + 1)
        console.log('mount')
    }, [])

    useEffect(() => {
        console.log('count update')
    }, [count])

    return (
        <>
            <p>{count}</p>
        </>
    )
}

这段代码会使得 count的值在初始化后变成4 ，而不是2 , 不太理解React为什么要这样设计。

• 河畔一角 #1

  确实很变态，有两种方法可以解决：
  1. 删除严格模式，不要那些过时的语法检查。
  2. 添加.env文件，定义当前环境为生产环境，比如NODE_ENV=production