共享同一useState状态的多元素，能否仅触发单个元素状态更新？

问题描述 #

当前定义了一个共享状态：

const [isLess, setIsLess] = useState(true);

同时有两个共享该状态的元素：

// some content
<span onPointerDown={changeStateToSeeLess}>
    See All <ExpandIcon/>
</span>

// some content
<span onPointerDown={changeStateToSeeLess}>
    See All <ExpandIcon/>
</span>

疑问：点击其中一个span时，能否仅更新该span的状态？若不能，如何实现点击（pointerdown）时仅将单个span切换为“See Less”？

能否仅更新单个span的状态？ #

不能。因为两个span共用同一个isLess状态变量，当调用setIsLess修改状态时，整个父组件会重新渲染，两个span都会根据最新的isLess值同步更新，无法做到只改变其中一个。

实现单个span独立切换的方案 #

这里提供两种常用实现方式：

方案1：封装独立子组件

把每个可切换的span封装成独立组件，让每个组件拥有自己的内部状态，状态完全隔离：

const ToggleSeeMore = () => {
  const [isLess, setIsLess] = useState(true);

  const handleToggle = () => {
    setIsLess(prev => !prev);
  };

  return (
    <span onPointerDown={handleToggle}>
      {isLess ? 'See All <ExpandIcon/>' : 'See Less <CollapseIcon/>'}
    </span>
  );
};

// 父组件中调用
// some content
<ToggleSeeMore />

// some content
<ToggleSeeMore />

方案2：用状态数组/对象管理单个元素状态

如果不想拆分组件，可以用数组或对象单独记录每个元素的状态，通过索引或唯一key区分：

// 初始化两个元素的状态，默认都为true（显示See All）
const [toggleStates, setToggleStates] = useState([true, true]);

const handleToggle = (index) => {
  setToggleStates(prev => {
    const newStates = [...prev];
    newStates[index] = !newStates[index];
    return newStates;
  });
};

// 渲染元素
// some content
<span onPointerDown={() => handleToggle(0)}>
  {toggleStates[0] ? 'See All <ExpandIcon/>' : 'See Less <CollapseIcon/>'}
</span>

// some content
<span onPointerDown={() => handleToggle(1)}>
  {toggleStates[1] ? 'See All <ExpandIcon/>' : 'See Less <CollapseIcon/>'}
</span>

如果元素数量不固定，也可以用对象+唯一key的方式管理：

const [toggleStates, setToggleStates] = useState({
  'item-1': true,
  'item-2': true
});

const handleToggle = (key) => {
  setToggleStates(prev => ({
    ...prev,
    [key]: !prev[key]
  }));
};

// 渲染
<span onPointerDown={() => handleToggle('item-1')}>
  {toggleStates['item-1'] ? 'See All <ExpandIcon/>' : 'See Less <CollapseIcon/>'}
</span>

<span onPointerDown={() => handleToggle('item-2')}>
  {toggleStates['item-2'] ? 'See All <ExpandIcon/>' : 'See Less <CollapseIcon/>'}
</span>

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