为何React组件首次渲染时‘render start’与‘im being rendered’各打印两次？

你的React组件在首次渲染时，console.log('render start')和useEffect里的console.log('im being rendered')各打印了两次，核心原因是React 18+ 开发环境下的严格模式（Strict Mode）。

具体解释： #

• React 18的严格模式在开发环境中，会刻意重复调用组件的渲染函数，以此检测组件中是否存在不符合React并发特性的代码（比如非幂等的渲染逻辑），所以你看到render start打印了两次。
• 对于useEffect，严格模式在开发环境下会执行特殊逻辑：首次渲染时先运行一次useEffect回调，然后立刻模拟组件卸载（若没写清理函数则跳过此步），接着重新挂载组件并再次运行useEffect回调，因此im being rendered也会打印两次。

验证与解决： #

• 生产环境下Strict Mode不会触发这种重复执行行为，日志只会打印一次。
• 若想在开发环境中看到预期的单次打印，只需移除项目入口文件中包裹<App />的<StrictMode>标签即可。

你的组件代码如下：

function App() {
  const [inputValue, setInputValue] = useState("");
  const previousInputValue = useRef("");

  console.log('render start')

  useEffect(() => {
    console.log("im being rendered")
    previousInputValue.current = inputValue;
  }, [inputValue]);

  return (
    <>
      <input
        type="text"
        value={inputValue}
        onChange={(e) => setInputValue(e.target.value)}
      />
      <h2>Current Value: {inputValue}</h2>
      <h2>Previous Value: {previousInputValue.current}</h2>
    </>
  );
}
export default App

内容的提问来源于stack exchange，提问作者ZahRaF