如何理解 https://juejin.cn/post/7125048592493969444 这篇文章？

[linghuccc]

我在写代码的时候，遇到一个 todos 每次会清零的问题，提问之后，有人回复了标题里面的这篇文章。我读了几遍，还是不能理解。
文章里面提到，这么做的目的是“为了通过挂载两次组件来提早发现你的问题”，但如果不加载两次，就根本不会出现问题。“挂载两次”，恰恰是造成问题的原因。
文中又提到“在生产环境中不会出现这种现象”，之所以要有开发环境，就是为了要模拟生产环境，这种设置，将开发环境和生产环境区别开来，只会给开发者带来额外的困扰。
顺便想问一句，React 是怎么知道，它处在什么环境之中的？

[jrenc2002]

为什么要挂载两次呢，是为了让你写 + return () => clearInterval(timer)，让你写清理函数。写了清理函数，那第一次执行后就被顺利清理了，那第二次执行就正常了。

[linghuccc]

所以挂载两次，就是为了提醒我们每次都写清理函数，写出更完善更全面，适应度更高的代码，这样的话，我大概能理解了

[jrenc2002]

useEffect 什么情况下不执行两次回调
在 React 严格模式下，React 会在开发环境中将某些副作用（如 useEffect 的回调函数）执行两次。这是为了帮助开发者发现不纯的副作用。不过在以下情况下，useEffect 不会执行两次回调：

生产环境：严格模式的这些额外检查和副作用只会在开发环境中运行。在生产环境中，useEffect 的回调函数只会执行一次。

没有使用严格模式：如果你没有使用 React.StrictMode 包裹你的组件树或组件，那么 useEffect 的回调函数也不会执行两次。

使用依赖数组：如果依赖数组中的值没有发生变化，useEffect 的回调函数不会被执行。如下所示：

import React, { useEffect } from 'react';

function MyComponent() {
  useEffect(() => {
    console.log('useEffect called');
    // 只有在 dependencies 变化时，回调函数才会被调用
  }, []); // 空数组，表示只在组件挂载和卸载时调用

  return <div>My Component</div>;
}

export default MyComponent;

[jrenc2002]

<React.StrictMode> 是 React 提供的一个工具，用于帮助开发者在开发阶段识别潜在的问题。严格模式不会对应用的表现产生任何影响，只会在开发环境中运行，提供额外的检查和警告。它的主要目的是促进最佳实践，帮助识别潜在的错误，确保未来的兼容性。

主要功能
识别不安全的生命周期方法：
严格模式会自动识别一些已经不推荐使用或者存在潜在问题的生命周期方法，如 componentWillMount、componentWillReceiveProps 和 componentWillUpdate，并给出警告。

识别意外的副作用：
严格模式会通过在开发环境中双调用某些生命周期方法（如 componentDidMount 和 useEffect）来帮助识别不纯的副作用。这有助于开发者确认其代码在调用多次时是否仍然能正常工作。

标识遗留字符串引用的 ref：
使用字符串作为 ref 的方法已经被不推荐使用。严格模式会识别这种使用并给出警告。

检测意外的副作用和提早报告潜在问题：
严格模式会在开发环境中增加额外的检查和警告，以便开发者提早发现和解决潜在的问题。

如何使用
要启用严格模式，可以使用 React.StrictMode 组件包裹应用或者某个子树。例如：

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

你也可以选择性地包裹某个组件或组件树的一部分：

import React from 'react';

function MyComponent() {
  return (
    <React.StrictMode>
      <SomeChildComponent />
    </React.StrictMode>
  );
}

总结
<React.StrictMode> 是一个开发阶段的工具，帮助识别和处理潜在的问题，确保代码遵循最佳实践，并为未来的 React 版本兼容性做好准备。它不会影响生产环境的应用性能，只会在开发环境中提供额外的检查和警告。

[linghuccc]

React 是怎么知道，它现在处于开发环境还是生产环境的？

[haobarry]

npm run dev 启动的就是开发环境呀
生产环境是打包后的，react的编译器会使用webpack合并代码 所以不一样