React useRef渲染计数跳变：StrictMode模式的幕后影响-js教程-PHP中文网

React useRef渲染计数跳变：StrictMode模式的幕后影响

碧海醫心

发布： 2025-10-24 14:04:01

原创

142人浏览过

React useRef渲染计数跳变：StrictMode模式的幕后影响

本文探讨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 (
        <>
            <input value={name} onChange={e => setName(e.target.value)} />
            <div>My name is {name}</div>
            <div>I rendered {renderCount.current} times</div>
        </>
    );
};

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）中启用，通过将根组件包裹在<React.StrictMode>标签内实现。

// 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>
    <App /> {/* 你的整个应用都在StrictMode的包裹下运行 */}
  </StrictMode>
);

登录后复制

如果你移除<StrictMode>标签，你会发现renderCount的行为将符合预期，即首次状态改变后从1变为2。

注意事项与总结

StrictMode是开发工具：StrictMode旨在帮助你在开发阶段发现潜在问题，它不会在生产环境中影响你的应用行为。因此，即使在开发模式下看到useEffect双重执行，在生产环境中它只会执行一次。
不要关闭StrictMode以“修复”此问题：关闭StrictMode虽然会使渲染计数看起来“正常”，但你同时也放弃了React提供的强大开发辅助功能，可能会错过发现潜在副作用和内存泄漏的机会。
理解是关键：对于useRef跟踪渲染次数的场景，理解StrictMode的行为至关重要。你看到的“异常”实际上是React为了提升代码健壮性而有意为之。如果你的逻辑依赖于精确的渲染次数（例如，用于性能测量），你需要考虑到StrictMode在开发环境中的影响，或者在生产环境中进行测量。
精确计数策略（如有必要）：如果确实需要一个在开发和生产环境都表现一致的“真实”渲染计数，你可能需要更复杂的逻辑，例如结合process.env.NODE_ENV来判断当前环境，或者在useEffect中使用一个更精细的机制来避免双重计数，但这通常是不必要的，因为StrictMode的目的是为了辅助开发，而非改变核心逻辑。

总之，React useRef在StrictMode下显示渲染计数从1到3的跳变是预期的开发行为，旨在帮助开发者构建更健壮的应用。理解这一机制，而不是试图“修复”它，是更专业的做法。

以上就是React useRef渲染计数跳变：StrictMode模式的幕后影响的详细内容，更多请关注php中文网其它相关文章！