React快速更新场景下跳过中间重渲染的实现方案咨询

问题场景 #

我有一段处理外部信号快速更新的代码，调用setState时会触发耗时较长的重渲染。伪代码如下：

const FastUpdate = ({signalPoint, otherProp}) => {
   const [state, setState] = useState(null)
   useEffect(() => {
      setState(calcNewState(signalPoint,otherProp))
   },[signalPoint])
   return <VeryTimeConsimingComponent dependency={state}/>
}

当前问题：若signalPoint在1秒内变化15次，会触发15次重渲染，但第8次重渲染执行时，signalPoint已更新至第11次，导致实时数据延迟不断累积，中间数据无实际价值。

另外防抖方案不适用：应用要求UI刷新延迟小于100ms，无法设置延迟等待所有变更完成，希望收到输入后立即开始重渲染，但在重渲染未完成且有新值到达时，阻止中间的setState调用。

可行实现方式 #

核心思路是标记当前是否正在渲染，同时记录最新的信号值，渲染完成后再检查是否有新值待处理，具体可以通过以下几种方式实现：

1. 使用useRef手动控制渲染时机 #

用两个useRef分别记录当前是否处于渲染中，以及最新的signalPoint值。当新信号到来时，如果正在渲染，就只更新最新值；如果不在渲染中，就立即触发状态更新并标记渲染状态，等组件渲染完成后再检查是否有未处理的新值，若有则再次触发更新。

示例代码：

const FastUpdate = ({ signalPoint, otherProp }) => {
  const [state, setState] = useState(null);
  // 标记是否正在进行重渲染
  const isRenderingRef = useRef(false);
  // 存储最新的未处理signalPoint
  const latestSignalRef = useRef(signalPoint);

  // 监听signalPoint变化
  useEffect(() => {
    latestSignalRef.current = signalPoint;
    // 当前没在渲染，直接触发更新
    if (!isRenderingRef.current) {
      isRenderingRef.current = true;
      setState(calcNewState(latestSignalRef.current, otherProp));
    }
  }, [signalPoint, otherProp]);

  // 渲染完成后检查是否有新信号待处理
  useLayoutEffect(() => {
    // 渲染完成，重置标记
    isRenderingRef.current = false;
    // 如果最新信号和当前用于计算state的信号不一致，说明有新值没处理
    if (latestSignalRef.current !== signalPoint) {
      setState(calcNewState(latestSignalRef.current, otherProp));
    }
  }, [state, signalPoint, otherProp]);

  return <VeryTimeConsimingComponent dependency={state} />;
};

2. 利用React 18的useDeferredValue（适合高版本React） #

React 18新增的useDeferredValue可以让React优先处理最新的更新，跳过中间的非紧急更新，配合useMemo和Suspense使用，能自动帮你合并无效的中间渲染：

const FastUpdate = ({ signalPoint, otherProp }) => {
  // 延迟处理非紧急的signalPoint更新
  const deferredSignal = useDeferredValue(signalPoint);
  // 仅当deferredSignal变化时计算新状态
  const state = useMemo(() => {
    return calcNewState(deferredSignal, otherProp);
  }, [deferredSignal, otherProp]);

  return (
    <React.Suspense fallback={<div>加载中...</div>}>
      <VeryTimeConsimingComponent dependency={state} />
    </React.Suspense>
  );
};

注意：这种方式适合希望React自动调度更新优先级的场景，如果你需要更精准地控制渲染时机，第一种手动控制的方式更可靠。

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