实现卡片独立点击旋转，用useRef还是拆分组件useState更合适？

算力阿峰

2026-9-3

问题根源

当前实现中所有卡片共用父组件内的同一个clicked状态，状态变更时所有绑定了该状态样式的卡片会同步更新，因此会出现点击单个卡片所有卡片同步旋转的问题。

方案选型结论

不要使用useRef实现该需求：useRef保存的值修改后不会触发组件重渲染，无法驱动视图自动更新，如果强行用ref实现需要额外手动触发重渲染，完全违背React状态驱动视图的设计原则，属于反模式。
符合开发规范的方案是拆分独立的卡片组件，由卡片自身维护旋转的局部状态：这类仅和单个UI组件交互相关的状态不需要上提到父组件管理，组件内聚自身状态的写法耦合度更低、渲染性能更好。只有当父组件确实需要感知卡片的旋转状态（比如做批量操作、统计翻转卡片数量）时，才需要通过props传递回调函数，让卡片把状态变更同步给父组件即可，不需要把状态全量放在父组件维护。

参考实现代码

import { useState } from 'react';

// 独立卡片组件，内聚自身旋转状态
function Card() {
  const [isRotated, setIsRotated] = useState(false);
  const toggleRotate = () => setIsRotated(prev => !prev);

  return (
    <div
      className={`card ${isRotated ? "rotate-180" : ""}`}
      onClick={toggleRotate}
    ></div>
  );
}

// 父组件渲染多卡片，各卡片状态完全独立
function App() {
  return (
    <div className="card-container">
      <Card />
      <Card />
      <Card />
      {/* 任意新增卡片都不会出现联动旋转问题 */}
    </div>
  );
}