为什么 `useRef` 不触发重新渲染？它与 Fiber 节点的 `ref` 属性在内存中的关联

各位同仁，下午好。

今天，我们将深入探讨一个在React前端开发中既常见又核心的问题：为什么 useRef 不会触发组件的重新渲染？同时，我们也将揭示 useRef 如何与 React 内部的 Fiber 节点机制，特别是其 ref 属性，在内存中巧妙地关联起来。理解这一点，对于我们精确地控制组件行为、优化性能以及避免不必要的渲染至关重要。

一、 useRef 的基本作用与设计哲学

在React Hooks的生态中，useRef 是一个相对特殊的存在。它允许我们在函数组件中创建一个可变的引用对象，该对象在组件的整个生命周期内保持不变。它的主要结构是一个普通JavaScript对象，形如 { current: initialValue }。

useRef 的主要应用场景大致可以分为两类：

1. 持有可变值，且这些值的改变不需要触发组件重新渲染。 比如，存储计时器ID、WebSocket实例、上一个渲染周期的数据等。这些数据在组件内部需要被访问和修改，但它们的更新不直接映射到UI的变化，因此无需导致UI刷新。
2. 直接访问DOM元素或React组件实例。 这是 ref 机制的经典用法，通过将 useRef 创建的 ref 对象绑定到JSX元素的 ref 属性上，可以在 useEffect 或事件处理函数中直接操作DOM节点。

useRef 的设计哲学在于提供一个“逃生舱口”（escape hatch），允许开发者在纯函数组件的范式下，处理一些需要命令式操作或维持可变状态的场景，而无需引入类组件。更重要的是，它被设计成不影响React的渲染机制，即其值的改变不会自动触发组件的重新渲染。这与 useState 或 useReducer 形成了鲜明对比，后两者的核心职责就是管理状态并通知React进行UI更新。

让我们通过一个简单的例子来对比 useState 和 useRef 的行为差异：

import React, { useState, useRef, useEffect } from 'react';

function CounterWithState() {
  const [count, setCount] = useState(0);

  console.log('CounterWithState renders. Current count:', count);

  return (
    <div>
      <h3>State Counter</h3>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

function CounterWithRef() {
  const countRef = useRef(0);
  const [, forceRender] = useState(0); // 用于手动触发渲染

  console.log('CounterWithRef renders. Current countRef.current:', countRef.current);

  const handleClick = () => {
    countRef.current = countRef.current + 1;
    console.log('Ref value updated:', countRef.current);
    // 注意：这里没有调用setState，UI不会自动更新
    // 如果需要UI更新，必须手动触发，如下所示：
    // forceRender(prev => prev + 1);
  };

  return (
    <div>
      <h3>Ref Counter</h3>
      <p>Count (from ref): {countRef.current}</p>
      <button onClick={handleClick}>Increment Ref (No Re-render)</button>
      <button onClick={() => forceRender(prev => prev + 1)}>Force Re-render</button>
    </div>
  );
}

function App() {
  return (
    <div>
      <CounterWithState />
      <hr />
      <CounterWithRef />
    </div>
  );
}

export default App;

运行上述代码，你会观察到：

• 点击 CounterWithState 的 "Increment" 按钮时，控制台会立即打印 CounterWithState renders...，并且UI上的数字也会同步更新。
• 点击 CounterWithRef 的 "Increment Ref (No Re-render)" 按钮时，控制台会打印 Ref value updated: ...，但 CounterWithRef renders... 不会立即打印，UI上的数字也不会更新。只有当你点击 "Force Re-render" 按钮时，CounterWithRef renders... 才会打印，并且UI上的数字才会更新到 countRef.current 的最新值。

这个实验直观地展示了 useRef 的核心特性：它的 current 属性的修改并不会通知React重新渲染组件。那么，这背后的机制究竟是什么呢？

二、React 渲染机制的基石：Fiber 架构与调度器

要理解 useRef 为何不触发重新渲染，我们必须首先对React的渲染机制有一个清晰的认识，特别是其自React 16以来的Fiber架构。

2.1 传统的Virtual DOM与协调（Reconciliation）

在Fiber之前，React的渲染过程基于一个同步的递归算法，遍历Virtual DOM树，比较新旧树的差异（diffing），然后将这些差异批量更新到实际DOM上。这个过程称为协调（Reconciliation）。当组件的 state 或 props 发生变化时，React会认为这个组件可能需要重新渲染，从而启动协调过程。

2.2 Fiber 架构的引入：可中断的协调

Fiber架构是React对其核心算法的彻底重写，旨在实现以下目标：

• 可中断性（Interruptibility）： 协调过程不再是同步的、不可中断的。它可以在任何时候暂停和恢复，从而允许浏览器在渲染高优先级任务（如用户输入、动画）时介入，提升用户体验。
• 优先级（Prioritization）： 不同的更新可以有不同的优先级。例如，用户输入导致的更新应比后台数据加载导致的更新具有更高的优先级。
• 并发模式（Concurrent Mode）： 这是Fiber最终要实现的目标，允许React同时处理多个任务，甚至并行地渲染不同的UI部分。

为了实现这些目标，React引入了 Fiber。一个 Fiber 对象可以被认为是React内部表示组件实例的一个工作单元。它包含了组件的类型、props、state、子节点等信息，以及与调度和优先级相关的数据。整个应用UI被表示为一个 Fiber 树。

Fiber 架构的两个主要阶段：

1. 渲染/协调阶段 (Render/Reconciliation Phase)：

   • 这个阶段是“纯粹的”，不会执行任何DOM操作或触发副作用（如 useEffect 中的清理函数或回调）。
   • React会遍历Fiber树，为需要更新的组件执行其 render 方法（对于函数组件就是执行函数本身），计算新的Virtual DOM（或新的Fiber节点）。
   • 它会比较新旧Fiber节点之间的差异，并标记出需要进行DOM操作的节点（插入、更新、删除）。
   • 这个阶段是可中断的，如果浏览器有更高优先级的任务，React可以暂停此阶段的工作。
   • 重要： 这个阶段的产物是一系列“副作用列表”（Effect List），描述了在下一个阶段需要对DOM做什么。

2. 提交阶段 (Commit Phase)：

   • 这个阶段是不可中断的，因为涉及到实际的DOM操作，必须一次性完成以避免UI不一致。
   • React会根据渲染阶段生成的副作用列表，执行所有的DOM更新（插入、更新、删除）。
   • 在这个阶段，ref 回调会被调用，useLayoutEffect 和 useEffect 的回调也会被执行。
   • 一旦DOM更新完成，浏览器就可以绘制新的UI。

2.3 React 调度器（Scheduler）

在Fiber架构中，调度器扮演着至关重要的角色。它负责根据优先级和时间切片来决定何时以及如何执行Fiber工作单元。当组件的 state 或 props 发生变化时，React并不是立即重新渲染，而是通过调度器来安排一次更新。

• setState 或 dispatch (from useReducer) 会通知React，某个Fiber节点的状态发生了变化，需要安排一次更新。
• 调度器会将这个更新标记为某个优先级，并将其添加到工作队列中。
• 在浏览器空闲时，调度器会开始处理工作队列中的任务，启动渲染阶段。

核心结论： React之所以会重新渲染组件，是因为它被明确地告知（通过 setState/dispatch）某个组件的“状态”已经改变，并且这个改变可能影响到UI。调度器是连接状态变化与渲染阶段的桥梁。

三、useRef 为何不触发重新渲染：深入内部机制

现在，我们有了React渲染机制的背景知识，可以更精确地解释 useRef 的行为。

3.1 useRef 与 Hooks 内部状态的关联

每个函数组件的实例在React内部都有一个与其关联的 Fiber 节点。这个 Fiber 节点会存储该组件的所有 Hooks 的内部状态。Hooks 的状态通常存储在一个链表或数组中，按照它们在组件函数中被调用的顺序排列。

当 useRef(initialValue) 被调用时，React会做几件事：

1. 首次渲染时：

   • React会为这个特定的 useRef 调用创建一个“引用对象” { current: initialValue }。
   • 这个对象会被存储在当前组件 Fiber 节点的一个内部状态槽位中（可以想象成一个数组中的一个元素）。
   • useRef 返回这个对象。

2. 后续渲染时：

   • React会从Fiber节点的相应状态槽位中取出之前创建的那个引用对象。
   • useRef 直接返回这个已经存在的对象，而不会重新创建一个新的。这就是为什么 useRef 能够在组件多次渲染之间保持同一个引用。

关键在于：useRef 返回的这个 { current: ... } 对象是一个普通的JavaScript对象。当你修改 ref.current = newValue 时，这仅仅是一个普通的JavaScript属性赋值操作。

// 假设这是React内部对useRef的简化实现概念
function simplified_useRef(initialValue) {
  // 假设每个组件实例都有一个内部的hooksState数组
  const hooksState = getCurrentFiber().memoizedState.hooks;

  let refObject;
  if (isFirstRender) {
    // 首次渲染，创建并存储
    refObject = { current: initialValue };
    hooksState.push(refObject); // 存储到Fiber的hooksState中
  } else {
    // 后续渲染，从hooksState中取出
    refObject = hooksState[currentHookIndex];
  }

  currentHookIndex++; // 移动到下一个hook
  return refObject;
}

// 当你在组件中这样做：
// const myRef = useRef(0);
// myRef.current = 10; // 这是一个直接的JS赋值操作

这个赋值操作是局部的、直接的内存修改。它并没有通过 setState 或 dispatch 来通知React的调度器。因此，React的调度器对此一无所知，也就不会安排任何重新渲染。

3.2 useState vs useRef：通知机制的差异

为了更清晰地对比，我们来看 useState 的内部机制：

当 useState(initialState) 被调用时：

1. 首次渲染时：

   • React会创建一个状态变量，并将其 initialState 存储在Fiber节点的一个内部状态槽位中。
   • 它还会创建一个 setter 函数（例如 setCount），这个函数被绑定到当前的Fiber节点和这个特定的状态槽位。
   • useState 返回 [state, setter]。

2. 后续渲染时：

   • React从Fiber节点的相应槽位中取出当前的状态值。
   • 返回 [state, setter]。

关键差异：

• useState 的 setter 函数： 当你调用 setCount(newValue) 时，这个 setter 函数内部会执行一系列操作：

  • 它会更新Fiber节点内部存储的状态值。
  • 最重要的是，它会通知React的调度器： “嘿，FiberX 节点的状态已经改变了，请安排一次更新！”
  • 调度器接收到通知后，会根据优先级决定何时启动渲染阶段，重新执行 FiberX 对应的组件函数。

• useRef 的 current 属性： 修改 ref.current 只是一个简单的 object.property = value 操作。它不会触发任何内部的React机制来通知调度器。

总结表格：

特性	useState	useRef
用途	管理组件的状态，这些状态的变化需要反映在UI上。	持有可变值，这些值的变化通常不需要反映在UI上。
返回值	[state, setState]	{ current: value }
更新机制	调用 setState 函数	直接修改 ref.current 属性
触发重新渲染	是，setState 会通知调度器安排更新。	否，直接修改 current 不会通知调度器。
值稳定性	每次渲染都可能不同（如果状态改变）	在组件的整个生命周期内，引用对象本身是稳定的。
存储位置	Fiber节点的 memoizedState 中	Fiber节点的 memoizedState 中
主要效果	响应式UI更新	局部可变状态、DOM/组件实例访问

四、useRef 与 Fiber 节点的 ref 属性在内存中的关联

除了持有任意可变值，useRef 的另一个强大功能是直接访问DOM元素。这涉及到JSX元素的 ref 属性，以及React如何将实际DOM节点赋值给 useRef 创建的 ref 对象的 current 属性。

4.1 JSX ref 属性与 Fiber 节点的连接

当你在JSX中写 <input ref={myRef} /> 时，myRef 就是一个由 useRef 创建的引用对象。在React内部，这个 ref 属性被处理为一个特殊的 prop。

• 在构建 Fiber 树的渲染阶段，当React处理到带有 ref 属性的JSX元素时，它会记录下这个 ref 对象与当前Fiber节点之间的关联。
• 这个关联信息会被存储在Fiber节点的 ref 字段中。

// 假设有一个Input组件
function MyInput() {
  const inputRef = useRef(null);

  useEffect(() => {
    if (inputRef.current) {
      inputRef.current.focus();
    }
  }, []);

  return <input type="text" ref={inputRef} />;
}

在这个例子中，inputRef 是 useRef 返回的对象。当React处理 <input ref={inputRef} /> 这个JSX元素时，它会识别出 ref 属性，并将 inputRef 这个对象存储到代表 <input> 元素的那个Fiber节点的 ref 字段中。

4.2 赋值发生在提交阶段

关键点在于 何时 将真实的DOM节点赋值给 inputRef.current。这个操作发生在 提交阶段 (Commit Phase)。

回顾提交阶段的职责：

1. 执行所有的DOM更新（插入、更新、删除）。
2. 调用 ref 回调。
3. 执行 useLayoutEffect 和 useEffect。

因此，在React将 <input> 元素实际插入到DOM树中之后，它会检查其对应的Fiber节点的 ref 字段。如果这个 ref 字段是一个由 useRef 创建的对象，React就会将刚刚创建或更新的真实DOM节点（例如 <input> 元素本身）赋值给 refObject.current。

// 概念性地：在React的提交阶段，对于一个有ref属性的Fiber节点
function commitPlacement(fiber) {
  // ... 将fiber对应的DOM节点插入到实际DOM树中 ...
  const domNode = fiber.stateNode; // 真实的DOM节点

  if (fiber.ref !== null) {
    // fiber.ref 存储的就是我们从useRef得到的那个对象
    // 或者是一个回调函数
    if (typeof fiber.ref === 'function') {
      fiber.ref(domNode);
    } else {
      // 这是一个useRef对象
      fiber.ref.current = domNode; // 关键的赋值操作
    }
  }
}

再次强调： 这个 ref.current = domNode 的赋值操作，虽然它修改了 inputRef.current，但它同样是一个普通的JavaScript赋值。它发生在React的内部协调流程中，是React完成DOM更新后执行的一个“副作用”。这个副作用并不会反过来通知调度器再次启动渲染阶段。它只是在当前渲染周期结束时，更新了 useRef 对象的 current 属性，使其指向了最新的DOM节点。

这就是为什么你通常需要在 useEffect 中访问 ref.current。useEffect 在提交阶段之后执行，此时 ref.current 已经指向了真实的DOM节点。

import React, { useRef, useEffect } from 'react';

function DOMInteractionComponent() {
  const myInputRef = useRef(null);
  const myDivRef = useRef(null);

  useEffect(() => {
    // 在组件首次挂载（以及依赖项变化）后，DOM节点已就绪
    if (myInputRef.current) {
      console.log('Input DOM node:', myInputRef.current);
      myInputRef.current.focus(); // 聚焦输入框
    }
    if (myDivRef.current) {
      console.log('Div DOM node:', myDivRef.current);
      myDivRef.current.style.backgroundColor = 'lightblue'; // 修改背景色
    }
  }, []); // 空数组表示只在挂载时执行一次

  const measureDiv = () => {
    if (myDivRef.current) {
      const rect = myDivRef.current.getBoundingClientRect();
      console.log('Div dimensions:', rect);
    }
  };

  return (
    <div>
      <input type="text" ref={myInputRef} placeholder="我会自动聚焦" />
      <div ref={myDivRef} style={{ width: '100px', height: '100px', border: '1px solid black', marginTop: '10px' }}>
        这是一个方块
      </div>
      <button onClick={measureDiv}>测量方块</button>
    </div>
  );
}

export default DOMInteractionComponent;

在这个例子中，myInputRef.current 和 myDivRef.current 在 useEffect 内部被访问和操作。这些操作都是针对真实的DOM节点进行的，它们本身并不会触发React组件的重新渲染。

五、 useRef 的应用场景与注意事项

5.1 典型应用场景

1. 直接访问DOM元素或React组件实例：

   • 聚焦输入框、播放/暂停媒体元素。
   • 测量DOM元素的大小和位置。
   • 集成第三方DOM库（如图表库）。
   • 调用子组件暴露的方法（通过 useImperativeHandle 和 forwardRef）。

   // 聚焦输入框
   function FocusInput() {
     const inputEl = useRef(null);
     const onButtonClick = () => {
       inputEl.current.focus();
     };
     return (
       <>
         <input ref={inputEl} type="text" />
         <button onClick={onButtonClick}>Focus the input</button>
       </>
     );
   }

2. 存储不需要触发重新渲染的可变值：

   • 计时器ID： 存储 setTimeout 或 setInterval 返回的ID，以便在 useEffect 的清理函数中清除。

   function TimerComponent() {
     const timerIdRef = useRef(null);
     const [count, setCount] = useState(0);
   
     useEffect(() => {
       timerIdRef.current = setInterval(() => {
         setCount(prevCount => prevCount + 1);
       }, 1000);
   
       return () => {
         clearInterval(timerIdRef.current);
       };
     }, []);
   
     return <div>Count: {count}</div>;
   }

   • 上一个值（usePrevious Hook）： 存储组件上一个渲染周期的某个值。

   function usePrevious(value) {
     const ref = useRef();
     useEffect(() => {
       ref.current = value; // 每次渲染后更新ref.current
     });
     return ref.current;
   }
   
   function MyComponent({ value }) {
     const prevValue = usePrevious(value);
     console.log(`Current: ${value}, Previous: ${prevValue}`);
     return (
       <div>
         <p>Current Value: {value}</p>
         <p>Previous Value: {prevValue}</p>
       </div>
     );
   }

   • 防止 useEffect 重新运行的标志： 例如，只在组件挂载时运行一次某个副作用，即使依赖项中的函数引用变了。

   function MyEffectComponent() {
     const hasRunRef = useRef(false);
   
     useEffect(() => {
       if (!hasRunRef.current) {
         console.log('This effect runs only once on mount!');
         hasRunRef.current = true;
       }
     }, []); // 依赖项为空数组，但如果内部逻辑依赖外部变量，可能需要hasRunRef
   
     return <div>Check console</div>;
   }

3. 存储事件处理函数的最新引用： 在 useCallback 的依赖数组中避免包含不稳定的函数引用，可以使用 useRef 来存储最新版本的函数。

   function SaveButton({ onSave }) {
     const onSaveRef = useRef(onSave);
   
     // 确保onSaveRef.current 始终是最新的onSave函数
     useEffect(() => {
       onSaveRef.current = onSave;
     }, [onSave]);
   
     const handleClick = useCallback(() => {
       // 调用最新版本的onSave函数
       onSaveRef.current();
     }, []); // handleClick 不依赖于 onSave，因为它通过onSaveRef访问
   
     return <button onClick={handleClick}>Save Data</button>;
   }

5.2 useRef 的注意事项与反模式

• 不要将 useRef 用于需要触发UI更新的数据。 如果数据的变化需要反映在用户界面上，那么 useState 或 useReducer 才是正确的选择。强行使用 useRef 并手动 forceRender 是一个代码异味，通常意味着设计上的缺陷。
• ref.current 的修改是同步的且不会触发重新渲染。 这意味着如果你在渲染函数中直接读取 ref.current 的值，它将反映上一次渲染（或上一次 ref.current 被修改）后的值，而不是在当前渲染周期内被修改后的值（除非你在同一个渲染周期内修改并读取）。
• 避免在渲染过程中读取或写入 ref.current。 渲染函数应该是纯函数，不应该有副作用。虽然你可以这样做，但它会使组件的行为难以预测和调试。最佳实践是在 useEffect 或事件处理函数中操作 ref.current。
• ref 并非总能保证立即获得DOM节点。 在组件首次挂载时，ref.current 在 render 阶段是 null。它只在提交阶段，当DOM被更新后，才会被赋值。因此，通常需要在 useEffect 中访问 ref.current。
• ref 不会响应DOM节点的重新创建。 如果一个元素因为 key 属性的变化而被完全替换，ref 会被重新赋值，但这个过程本身不会触发组件重新渲染。你需要依赖 useEffect 来监听 ref.current 的变化（例如，通过将其作为 useEffect 的依赖）。

六、 useImperativeHandle 与 forwardRef：暴露子组件Ref

有时，父组件需要访问子组件内部的DOM节点或方法，但直接将 ref 传递给函数组件是不行的，因为函数组件默认没有实例。这时就需要 forwardRef 和 useImperativeHandle。

• forwardRef： 允许函数组件接收一个 ref prop，并将其转发给内部的某个DOM元素或子组件。
• useImperativeHandle： 与 forwardRef 配合使用，允许你自定义暴露给父组件的 ref 句柄。这意味着父组件通过 ref.current 访问到的不再是子组件的整个实例或某个内部DOM节点，而是你通过 useImperativeHandle 定义的一个特定对象，其中包含你希望暴露的方法或属性。

import React, { useRef, useImperativeHandle, forwardRef } from 'react';

// 子组件
const ChildInput = forwardRef((props, ref) => {
  const inputRef = useRef(null);

  // 使用useImperativeHandle来自定义暴露给父组件的ref句柄
  useImperativeHandle(ref, () => ({
    focus: () => {
      inputRef.current.focus();
    },
    // 可以暴露更多方法或属性
    getValue: () => inputRef.current.value,
    clear: () => { inputRef.current.value = ''; }
  }));

  return <input type="text" ref={inputRef} placeholder="我是子组件的输入框" />;
});

// 父组件
function ParentComponent() {
  const childRef = useRef(null);

  const handleFocusChild = () => {
    if (childRef.current) {
      childRef.current.focus(); // 调用子组件暴露的focus方法
    }
  };

  const handleGetValue = () => {
    if (childRef.current) {
      alert(`Child input value: ${childRef.current.getValue()}`);
    }
  };

  const handleClearChild = () => {
    if (childRef.current) {
      childRef.current.clear();
    }
  };

  return (
    <div>
      <ChildInput ref={childRef} />
      <button onClick={handleFocusChild}>Focus Child Input</button>
      <button onClick={handleGetValue}>Get Child Value</button>
      <button onClick={handleClearChild}>Clear Child Input</button>
    </div>
  );
}

export default ParentComponent;

在这个例子中，ParentComponent 通过 childRef.current 访问到的不再是 <input> 元素本身，而是由 useImperativeHandle 返回的对象 { focus, getValue, clear }。这提供了一种更受控和封装的方式来让父组件与子组件进行命令式交互，同时仍然不触发父组件的重新渲染（除非父组件通过其他状态更新机制来响应这些交互）。

七、为什么React选择这样的设计？

React之所以将 useRef 设计为不触发重新渲染，是出于以下几个核心考量：

1. 性能优化： 重新渲染是一个相对昂贵的操作，它涉及重新执行组件函数、协调Virtual DOM、更新实际DOM等。如果每一次对可变引用的修改都触发重新渲染，那么许多内部的、不影响UI的逻辑就会导致不必要的性能开销。useRef 提供了一个存放这些“内部状态”的容器，而无需为此付出渲染成本。
2. 职责分离： useState 专注于管理那些直接影响UI的响应式状态，其核心职责就是驱动UI更新。而 useRef 则专注于管理那些不直接影响UI的、需要在多次渲染之间保持一致的可变值，或者用于直接操作DOM。这种职责分离使得组件的逻辑更清晰。
3. 命令式逃生舱口： React推崇声明式编程，但现实世界中总有一些场景需要命令式操作（如DOM操作、集成第三方库）。useRef 提供了一个优雅的机制来处理这些情况，而无需破坏React的声明式范式，并且不会引入不必要的渲染。
4. 避免无限循环： 想象一下，如果修改 ref.current 会触发重新渲染，那么在一个 useEffect 中修改 ref.current 可能会导致无限循环：修改 ref -> 触发渲染 -> useEffect 再次执行 -> 再次修改 ref -> …。当前的设计避免了这种潜在的问题。

八、总结与展望

useRef 是React Hooks生态中一个强大且不可或缺的工具。它通过提供一个在组件生命周期内保持不变的可变引用对象，有效地解决了在函数组件中持有持久化数据和直接访问DOM的需求，而这一切都发生在不触发组件重新渲染的前提下。其背后的原理在于，ref.current 的修改仅仅是一个普通的JavaScript属性赋值操作，它没有像 useState 的 setter 那样内置通知React调度器重新渲染的机制。

理解 useRef 与 Fiber 架构中 ref 属性的关联，以及其在渲染和提交阶段的工作方式，有助于我们更深入地掌握React的内部运作，从而编写出更加高效、健壮和可维护的React应用。正确地使用 useRef，是成为一名优秀React开发者的重要标志之一。