交换React元素key未触发预期过渡：是bug还是对key语义理解有误？

问题背景 #

我尝试通过交换两个<h1>元素的key值，实现两者在透明度变化时都触发CSS过渡效果，但实际运行时发现React似乎只保留了一个元素，另一个被新DOM元素替换，未触发过渡。这是React的bug，还是我对key属性的语义理解有误？

原实现代码 #

JSX代码 #

export default function App() {
  const [index, setIndex] = useState(0);
  const [oldIndex, setOldIndex] = useState();
  const [toggle, setToggle] = useState(0);
  const clickHandler = useCallback(
    (d) =>
      function () {
        setOldIndex(index);
        setIndex(index + d);
        setToggle(1 - toggle);
      },
    [index, toggle]
  );
  return (
    <div className="App">
      <button onClick={clickHandler(-1)}>Decrease</button>
      <button onClick={clickHandler(1)}>Increase</button>
      <h1 className="active" key={1 - toggle}>
        {index}
      </h1>
      <h1 className="inactive" key={toggle}>
        {oldIndex}
      </h1>
    </div>
  );
}

CSS代码 #

.App {
  font-family: sans-serif;
  text-align: center;
}
h1 {
  position: absolute;
  width: 100%;
  transition: opacity 2000ms;
}
h1.inactive {
  opacity: 0;
}

问题原因：对key语义的理解偏差 #

这不是React的bug，而是对key属性的核心作用理解有误。

key的本质是帮助React在diff算法中识别元素的唯一身份：当前后两次渲染的子元素列表中存在相同key的元素时，React会复用对应的DOM元素，仅更新其属性（如class、内容）；若key不存在，则卸载旧元素或挂载新元素。

在你的实现中，交换key的操作并没有让两个<h1>保持独立身份——React会根据key匹配对应的DOM元素，然后更新它们的class和内容，而非保留两个独立元素并触发各自的过渡。例如当toggle切换时，原本带有active类的元素会被更新为inactive类（反之亦然），但这种属性更新可能因DOM复用的逻辑，导致其中一个元素的过渡未按预期触发。

优化方案：使用useEffect跟踪状态变化 #

我另写了一个更简洁的版本，无需维护oldIndex状态，通过useEffect跟踪上一次的index值，实现两个元素的过渡效果：

核心思路 #

• 用状态保存当前显示的index和上一次的prevIndex
• 点击按钮时仅更新index，通过useEffect同步更新prevIndex
• 两个<h1>分别根据当前index和prevIndex控制active/inactive类，确保DOM元素稳定，触发过渡

示例代码（简化版） #

export default function App() {
  const [index, setIndex] = useState(0);
  const [prevIndex, setPrevIndex] = useState(0);

  useEffect(() => {
    setPrevIndex(index);
  }, [index]);

  const clickHandler = (d) => () => {
    setIndex(prev => prev + d);
  };

  return (
    <div className="App">
      <button onClick={clickHandler(-1)}>Decrease</button>
      <button onClick={clickHandler(1)}>Increase</button>
      <h1 className={index === prevIndex ? "active" : "inactive"}>
        {prevIndex}
      </h1>
      <h1 className={index !== prevIndex ? "active" : "inactive"}>
        {index}
      </h1>
    </div>
  );
}

这个方案中，两个<h1>的key无需变动（甚至可以省略，因为它们是固定的同级元素），React会稳定复用DOM元素，当类名变化时自然触发CSS过渡效果。

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