反应重置并保存状态？

小能豆

反应重置并保存状态？

javascript

默认情况下，React 会在组件停留在同一位置时保留其状态。通常，这正是您想要的，因此将其作为默认行为是有意义的。

示例取自新的React 文档。

Example 1 - the same position，codesandbox，（相关代码）：

  return (
    <div>
      {isPlayerA ? (
        <Counter person="Taylor" />
      ) : (
        <Counter person="Sarah" />
      )}
      <button onClick={() => {
        setIsPlayerA(!isPlayerA);
      }}>
        Next player!
      </button>
    </div>
  );

Example 2 - different position，codesandbox，（相关代码）：

  return (
    <div>
      {isPlayerA &&
        <Counter person="Taylor" />
      }
      {!isPlayerA &&
        <Counter person="Sarah" />
      }
      <button onClick={() => {
        setIsPlayerA(!isPlayerA);
      }}>
        Next player!
      </button>
    </div>
  );

我很困惑为什么位置Example 2被视为不同？在两种情况下，只有一个Counter 组件被渲染。我遗漏了什么？

阅读 61

2024-06-16

共1个答案

小能豆

示例 1 可以像这样替换。

  return (
    <div>
      <Counter person={isPlayerA ? "Taylor" : "Sarah"} />
      {/* isPlayerA ? (
        <Counter person="Taylor" />
      ) : (
        <Counter person="Sarah" />
      ) */}
      <button onClick={() => {
        setIsPlayerA(!isPlayerA);
      }}>
        Next player!
      </button>
    </div>
  );

<Counter />不会被卸载，因为只有person道具发生了变化。

但示例2不同。

  return (
    <div>
      {isPlayerA &&
        <Counter person="Taylor" />
      }
      {!isPlayerA &&
        <Counter person="Sarah" />
      }
      <button onClick={() => {
        setIsPlayerA(!isPlayerA);
      }}>
        Next player!
      </button>
    </div>
  );

有 2 个<Counter />，它们处于已安装/未安装状态

2024-06-16