使用useRef存储计时器值但组件不更新的技术问题咨询

为什么ref更新了组件却不显示变化？ #

React组件的重渲染触发条件只有三种：

1. 组件自身的state发生变化
2. 父组件传递的props发生变化
3. 父组件发生重渲染

useRef的current属性更新属于非响应式更新，React不会追踪它的变化，也不会因为它的更新触发组件重渲染。你在setInterval里修改了timerRef.current，但组件的render函数并没有重新执行，页面上显示的还是组件第一次渲染时timerRef.current的快照值（也就是0），所以看不到更新。

满足需求的解决方案：拆分记忆化子组件 #

你不想让父组件随计时器更新重渲染，同时要把setInterval留在父组件里，最合理的做法是把计时器显示逻辑拆成独立的记忆化子组件：

• 父组件用useRef存储计时器数值，维护一个用于触发子组件更新的“触发器”状态
• 子组件通过React.memo包裹，只有当传入的props变化时才重渲染
• 每次setInterval更新ref后，更新触发器状态，让子组件获取最新的ref值并重新渲染

代码示例 #

父组件（Timer）

import { useRef, useEffect, useState } from 'react';
import TimerDisplay from './TimerDisplay';

const Timer = () => {
  const timerRef = useRef(0);
  // 用空对象作为触发器，每次更新创建新对象触发子组件更新
  const [updateTrigger, setUpdateTrigger] = useState({});

  useEffect(() => {
    const interval = setInterval(() => {
      timerRef.current += 1;
      // 更新触发器，触发子组件重渲染
      setUpdateTrigger({});
    }, 1000);
    return () => clearInterval(interval);
  }, []);

  // 父组件的其他内容不会随计时器更新重渲染
  return (
    <div>
      <h2>父组件内容（不受计时器影响）</h2>
      <TimerDisplay value={timerRef.current} />
    </div>
  );
};

export default Timer;

子组件（TimerDisplay）

import { memo } from 'react';

const TimerDisplay = ({ value }) => {
  return <p>Timer: {value}</p>;
};

// 记忆化处理，只有props变化时才重渲染
export default memo(TimerDisplay);

为什么不直接用state？ #

如果直接用useState存计时器数值，每次更新都会触发父组件重渲染，这正是你想要避免的情况。而上面的方案中，父组件只会在初始化和清理时执行一次，只有子组件会在计时器更新时重渲染，完美符合你的需求。

内容的提问来源于stack exchange，提问作者ryantan