如何反向存储3次prevState以适配CSS transitions引发的三次组件渲染

你要的需求完全可以通过 useEffect + useRef 实现，核心逻辑是用ref维护一个固定长度的状态历史队列，每次状态更新时刷新队列，队列首位就是三次前的状态值。

完整实现代码 #

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

function TransitionComponent() {
  const [count, setCount] = useState(0);
  // 初始化状态队列，长度固定为3，初始值和count的初始值保持一致即可
  const prevStatesQueue = useRef([0, 0, 0]);

  // 监听count变化，更新队列
  useEffect(() => {
    // 移出队列最旧的第一个元素，加入最新的count值到队尾
    prevStatesQueue.current = [...prevStatesQueue.current.slice(1), count];
  }, [count]);

  // 三次前的状态就是队列的第一个元素
  const threeStatesBackwards = prevStatesQueue.current[0];

  return (
    <div>
      <button onClick={() => setCount(prev => prev + 1)}>+</button>
      <div>当前count值：{count}</div>
      <div>三次前的count值：{threeStatesBackwards}</div>
    </div>
  );
}

注意事项 #

• 如果你的状态初始值不是0，直接修改prevStatesQueue的初始数组即可，比如初始count为2，就写useRef([2, 2, 2])，保证初始阶段的输出符合预期
• 该方案不会触发额外的组件渲染，不会干扰你的CSS transition逻辑，性能开销可以忽略
• 如果后续需要存储更多次的历史状态，只需要调整队列的初始长度即可，比如要存5次前的状态就把初始数组长度设为5，取值依然取索引0的元素即可

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