解密 React StrictMode：为什么你的组件会被“渲染两次”？它是如何帮你提升代码质量的

你有没有注意到 React 组件在开发模式下被渲染了两次？

什么是 React StrictMode？

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

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

1. 识别具有不安全生命周期的方法： 警告使用旧版、可能导致问题的生命周期方法。
2. 警告使用已弃用的 API： 比如旧版的字符串 ref API。
3. 检测意外的副作用： 这是与我们今天讨论的“双重渲染”最密切相关的一点。
4. 警告使用旧版上下文 API。
5. 确保 useState、useMemo 或 useReducer 的初始化函数和更新函数是纯净的。

为什么 StrictMode 要“两次渲染”组件？

双重渲染主要帮助你检测什么？

1. 不纯净的渲染函数： 如果你在组件渲染期间（例如，直接在函数组件的顶层或者 render 方法中）执行了数据修改、网络请求、或者订阅事件，那么双重渲染会导致这些操作重复执行。这很可能不是你想要的结果，并且会引起难以预料的 bug。

   JSX
   function MyComponent() {
     // 🚨 错误示例：直接在渲染期间进行副作用操作
     // 这会在开发模式下执行两次，可能导致重复的数据请求或其他问题
     // fetchData(); 
     console.log('组件渲染了！'); 
     return <div>Hello</div>;
   }

2. 不当的 useEffect 清理： useEffect 是处理副作用的正确地方。但如果你的 useEffect 设置了订阅、定时器或者其他需要清理的资源，而没有提供一个正确的清理函数（即 return 一个函数），那么当组件被快速卸载又挂载时，这些资源就会堆积，导致内存泄漏或者行为异常。 严格模式通过“双重调用” useEffect 的清理函数和 effect 函数来验证你的清理逻辑。它会先运行一次 effect，然后立即运行一次清理函数，接着再运行一次 effect。这模拟了组件卸载并立即重新挂载的场景。

   JSX
   import React, { useEffect, useState } from 'react';
   
   function TimerComponent() {
     const [count, setCount] = useState(0);
   
     useEffect(() => {
       console.log('useEffect 运行了！');
       const interval = setInterval(() => {
         setCount(prevCount => prevCount + 1);
       }, 1000);
   
       return () => {
         console.log('useEffect 清理了！');
         clearInterval(interval); // ✅ 正确的清理
       };
     }, []);
   
     return <div>计时器: {count}</div>;
   }

   如果你忘记了 clearInterval(interval)，在严格模式下你就会看到两个计时器同时运行，或者行为异常，从而提醒你缺少清理。
3. useState 和 useReducer 的初始化器与更新器： 它们也应该保持纯净和幂等。严格模式会尝试运行两次这些函数来检查它们是否会产生意外的副作用。

生产环境中也会双重渲染吗？

我该如何处理双重渲染带来的“问题”？

• 确保渲染函数是纯净的： 任何修改状态、发起网络请求、订阅事件等副作用都应该放在 useEffect 中。
• 提供正确的 useEffect 清理函数： 如果你的 useEffect 创建了需要销毁或取消的资源，务必在 return 的函数中进行清理。
• 利用 useRef 存储不应该触发重新渲染的持久化值： 如果某个值在多次渲染之间需要保持不变，但又不属于组件的状态，useRef 是一个好选择。

总结