个人总结

「同一位置」之定义，不仅取决于组件所处位置之JSX层级

还取决于组件所处层级中，与其他组件的先后顺序。

在第一个示例程序中：

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

无论isPlayerA是true还是false，<div>下都只有两个元素，一个组件<Counter/>，一个<button>。

而对于第二个示例程序：

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

当isPlayerA为true时：

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

当isPlayerA为false时：

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

<Counter/>组件所处顺序不同，React就不会保留它的状态。