本文探讨react功能组件中使用`useref`跟踪渲染次数时，首次状态更新导致计数从1跳变到3的现象。我们将揭示其核心原因在于react开发模式下的`strictmode`，它会双重调用`useeffect`以检测潜在副作用。文章将详细解释这一机制，并提供理解及应对策略，帮助开发者更准确地掌握组件生命周期。
理解useRef在React组件渲染计数中的应用
在React功能组件中，useRef是一个常用的Hook，它允许我们在组件的整个生命周期中持久化可变值，而不会在组件重新渲染时丢失。当我们需要跟踪组件的渲染次数时，useRef结合useEffect是一个直观且常见的实现方式。
考虑以下示例代码，它尝试使用useRef来记录组件的渲染次数：
import React, { useEffect, useRef, useState } from 'react';
const UseRefComponent = () => {
const [name, setName] = useState('');
const renderCount = useRef(1); // 初始化为1，表示首次渲染
useEffect(() => {
// 在每次渲染后，递增renderCount
renderCount.current = renderCount.current + 1;
}); // 没有依赖项数组，每次渲染后都会执行
return (
<>
setName(e.target.value)} />
My name is {name}
I rendered {renderCount.current} times
);
};
export default UseRefComponent;在这个组件中，renderCount被初始化为1。每次组件渲染后，useEffect回调函数都会执行，并将renderCount.current的值加1。我们期望的行为是：
- 首次渲染时，renderCount.current显示1。
- 第一次状态改变（例如输入框内容变化）导致组件重新渲染时，renderCount.current显示2。
- 第二次状态改变时，renderCount.current显示3，以此类推。
然而，实际观察到的现象是，在首次状态改变后，renderCount.current会从1直接跳变到3，而不是预期的2。这表明useEffect在某些情况下被执行了不止一次。
核心原因：React StrictMode的影响
导致这种渲染计数异常的核心原因在于React的严格模式（StrictMode）。StrictMode是React提供的一个开发工具，用于帮助开发者识别代码中潜在的问题和副作用。它不会在生产环境中生效，只在开发模式下运行。
StrictMode的一个关键行为是，在开发模式下，它会故意双重调用某些生命周期方法和Hook函数，包括useEffect的清理函数和回调函数。具体来说：
-
组件挂载时：在StrictMode下，React会模拟组件的挂载、卸载和重新挂载过程。这意味着，对于一个组件的首次挂载，useEffect的回调函数可能会被执行两次。
- 第一次执行：组件正常挂载，useEffect执行。
- 第二次执行：React模拟卸载组件，然后立即重新挂载，再次执行useEffect。
- 这个过程旨在帮助开发者确保useEffect中的逻辑在卸载和重新挂载时能够正确地清理和初始化，从而发现潜在的内存泄漏或不一致性问题。
StrictMode如何导致渲染计数跳变
结合上述StrictMode的行为，我们来分析renderCount的变化：
-
组件首次渲染（挂载阶段）：
- renderCount初始化为{ current: 1 }。
- 组件渲染，界面显示 I rendered 1 times。
- useEffect第一次执行（由StrictMode触发的首次挂载）：renderCount.current变为 1 + 1 = 2。
- useEffect第二次执行（由StrictMode触发的模拟重新挂载）：renderCount.current变为 2 + 1 = 3。
- 注意：虽然useEffect执行了两次，但由于它是在首次渲染后立即发生的，并且React在两次执行之间可能不会立即更新DOM，所以你看到的初始渲染结果仍是基于renderCount.current的初始值1。一旦DOM更新，它会显示3。
-
首次状态更新（例如输入框输入）：
- name状态改变，组件重新渲染。
- 此时，renderCount.current的值为3（来自挂载阶段的两次useEffect执行）。
- 组件重新渲染，界面显示 I rendered 3 times。
- useEffect正常执行一次（因为这不是挂载阶段，StrictMode不会再双重调用）：renderCount.current变为 3 + 1 = 4。
因此，在输入框输入内容后，你会在控制台或界面上看到renderCount从1直接跳变到3（或3变为4，取决于你何时观察）。
示例：StrictMode的启用方式
StrictMode通常在应用的入口文件（如index.js或main.jsx）中启用，通过将根组件包裹在
// src/index.js 或 src/main.jsx
import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import App from "./App"; // 假设你的根组件是App
const rootElement = document.getElementById("root");
const root = createRoot(rootElement);
root.render(
);如果你移除
注意事项与总结
- StrictMode是开发工具：StrictMode旨在帮助你在开发阶段发现潜在问题，它不会在生产环境中影响你的应用行为。因此，即使在开发模式下看到useEffect双重执行，在生产环境中它只会执行一次。
- 不要关闭StrictMode以“修复”此问题：关闭StrictMode虽然会使渲染计数看起来“正常”，但你同时也放弃了React提供的强大开发辅助功能，可能会错过发现潜在副作用和内存泄漏的机会。
- 理解是关键：对于useRef跟踪渲染次数的场景，理解StrictMode的行为至关重要。你看到的“异常”实际上是React为了提升代码健壮性而有意为之。如果你的逻辑依赖于精确的渲染次数（例如，用于性能测量），你需要考虑到StrictMode在开发环境中的影响，或者在生产环境中进行测量。
- 精确计数策略（如有必要）：如果确实需要一个在开发和生产环境都表现一致的“真实”渲染计数，你可能需要更复杂的逻辑，例如结合process.env.NODE_ENV来判断当前环境，或者在useEffect中使用一个更精细的机制来避免双重计数，但这通常是不必要的，因为StrictMode的目的是为了辅助开发，而非改变核心逻辑。
总之，React useRef在StrictMode下显示渲染计数从1到3的跳变是预期的开发行为，旨在帮助开发者构建更健壮的应用。理解这一机制，而不是试图“修复”它，是更专业的做法。
