本文探讨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 在这个组件中，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.jsximport { StrictMode } from "react";import { createRoot } from "react-dom/client";import App from "./App"; // 假设你的根组件是Appconst rootElement = document.getElementById("root");const root = createRoot(rootElement);root.render( {/* 你的整个应用都在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模式的幕后影响的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1532152.html
微信扫一扫 
支付宝扫一扫 
