react严格模式控制流程是什么

Question

在react严格模式下以下组件的输出是什么？

import { useEffect } from "react";

export default function Learn() {
    let x = 1;
    console.log("outside ", x)
    useEffect(() => {
        console.log(x);
        x = 2;

        return () => console.log("destruct", x)
    }, []);
    console.log("end of fn ", x)
    return (
        <>
            <p>value = {x}</p>
        </>
    );
}

我在我的机器上运行它，我得到了

outside  1
end of fn  1
outside  1
end of fn  1
1
destruct 2
2

但我不明白为什么。按照我的推理，应该是

outside 1
end of fn 1
1
destruct 2
outside 1
end of fn 1
1

我（错误地）假设反应严格模式将：

1. 开始将组件添加到虚拟 DOM。
2. 一旦挂载完成，它将调用 useState 钩子。
3. 再次重复（1）和（2）。

但这并没有发生在这里。那么这里发生了什么？

Answer 1

在 React Strict 模式下，由于某些生命周期方法的故意重复调用，某些行为可能与您期望的不同。这有助于在开发过程中捕获组件的副作用。

预期执行流程 React 严格模式在开发过程中有意调用组件两次，以帮助捕获具有副作用的问题。让我们逐步完成每个步骤：

初始渲染 - 第一次调用

let x = 1;: Initializes x to 1.
console.log("outside ", x);: Logs outside 1.
console.log("end of fn ", x);: Logs end of fn 1.

组件以 value = 1 进行渲染。 useEffect 在此渲染完成后运行。 效果执行（第一次调用）

console.log(x);: Logs 1.
x = 2;: Changes x to 2.
return () => console.log("destruct", x);: Sets up a cleanup function to log 

当组件卸载或重新渲染时，销毁 x 的当前值。 卸载（第一次调用）

清理函数作为严格模式行为的一部分运行，记录 destruct 2。 重新安装（第二次调用）

React 从头开始重新安装组件以模拟全新的开始：

let x = 1;: x is reset to 1.
console.log("outside ", x);: Logs outside 1.
console.log("end of fn ", x);: Logs end of fn 1.
The component renders with value = 1 again.

效果执行（第二次调用）

console.log(x);: Logs 1.
x = 2;: Changes x to 2 again.
return () => console.log("destruct", x);: Sets up a new cleanup function to log 

当组件卸载或重新渲染时，销毁 x 的当前值。

为什么会发生这种情况 在 React 严格模式下，React 在开发过程中有意渲染组件两次，以帮助识别否则可能不明显的潜在副作用。此行为仅发生在开发模式中，并且在生产版本中不存在。 在 React 严格模式下，React 在开发过程中有意渲染组件两次，以帮助识别否则可能不明显的潜在副作用。此行为仅发生在开发模式中，在生产版本中不存在。

当组件被挂载时，其生命周期包括挂载和卸载过程。因此，组件将由于此循环而多次记录信息。此方法旨在帮助开发人员捕获问题，确保组件可以正确处理安装、卸载和重新渲染，而不会出现意外行为。实际上，它通过揭示代码中隐藏的副作用来鼓励开发更强大和可预测的组件。