为什么ReactJS组件使用钩子渲染一次或两次取决于开发人员控制台是否打开？

Question

下面的代码在codesandbox的控制台中同时打印两次。io网站（该版本使用stricmode）以及下面的代码段（不使用stricmode）：

const { useState, useEffect } = React;

function useCurrentTime() {
  const [timeString, setTimeString] = useState("");

  useEffect(() => {
    const intervalID = setInterval(() => {
      setTimeString(new Date().toLocaleTimeString());
    }, 100);
    return () => clearInterval(intervalID);
  }, []);

  return timeString;
}

function App() {
  const s = useCurrentTime();
  console.log(s);

  return <div className="App">{s}</div>;
}

ReactDOM.render(<App />, document.getElementById("root"));

<div id="root"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.development.js"></script>

演示：https://codesandbox.io/s/gallant-bas-3lq5w?file=/src/App.js（使用StrictMode）

下面是一个使用生产libs的片段；它仍然记录两次：

const { useState, useEffect } = React;

function useCurrentTime() {
  const [timeString, setTimeString] = useState("");

  useEffect(() => {
    const intervalID = setInterval(() => {
      setTimeString(new Date().toLocaleTimeString());
    }, 100);
    return () => clearInterval(intervalID);
  }, []);

  return timeString;
}

function App() {
  const s = useCurrentTime();
  console.log(s);

  return <div className="App">{s}</div>;
}

ReactDOM.render(<App />, document.getElementById("root"));

<div id="root"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>

但是，当我打开开发人员控制台时，我看到每次只打印一次，在codesandbox.io控制台中，我也看到打印一次。

然后，如果我使用create-react-app创建独立的React应用程序，并使用上述代码，每次打印两次。

如何理解这种行为，根据不同情况打印一次或两次？我的想法是，如果状态改变，那么App将被重新呈现一次，并使用新字符串，因此它将被打印一次。奇怪的是，为什么它打印了两次，而当开发控制台打开时，它只打印了一次？

Answer 1

据我所知，我们看到的对App的双重调用是预期行为。从useState文档中：

退出状态更新

如果您将状态钩子更新为与当前状态相同的值，React将在不呈现子级或射击效果的情况下退出。说明：React使用Object.is比较算法。

请注意，在退出之前，React可能仍然需要再次渲染该特定组件。这不应该是一个问题，因为反应不会不必要地“深入”树。如果您在渲染时进行昂贵的计算，您可以使用useMemo优化它们。

关键点是“注意，React可能仍然需要在退出之前再次渲染特定组件…”而且“…React不会不必要地“深入”树中…”

事实上，如果我更新您的示例，使其使用子组件来显示时间字符串，我们只会看到每个timeString值调用一次子组件，而不是App值的两倍，即使子组件未包装在React中。备忘录：

const { useState, useEffect } = React;

function useCurrentTime() {
    const [timeString, setTimeString] = useState("");
  
    useEffect(() => {
        const intervalID = setInterval(() => {
            setTimeString(new Date().toLocaleTimeString());
        }, 100);
        return () => clearInterval(intervalID);
    }, []);
  
    return timeString;
}

function ShowTime({timeString}) {
    console.log("ShowTime", timeString);
    return <div className="App">{timeString}</div>;
}

function App() {
    const s = useCurrentTime();
    console.log("App", s);
  
    return <ShowTime timeString={s} />;
}

ReactDOM.render(<App />, document.getElementById("root"));

<div id="root"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>