最近在读 React 官方文档，读到「在渲染树中保留状态」这块了。文档提到，有两个示例程序是不同的，但没讲为什么。果然网上有一波人跟我有一模一样的困惑

[VisualStudioCode]

第一个示例程序： https://codesandbox.io/s/ly5h9z?file=%2FApp.js

文档位置： https://react.dev/learn/preserving-and-resetting-state#resetting-state-at-the-same-position

第二个示例程序： https://codesandbox.io/s/cp7y7q?file=%2FApp.js

文档位置： https://react.dev/learn/preserving-and-resetting-state#option-1-rendering-a-component-in-different-positions

谷歌一搜，全是同样的困惑：

[huangzhiyia]

区别是这个地方

{isPlayerA ? (
<Counter person="Taylor" />
) : (
<Counter person="Sarah" />
)}

这个状态会保留

{isPlayerA &&
<Counter person="Taylor" />
}
{!isPlayerA &&
<Counter person="Sarah" />
}
这个状态不会保留

[VisualStudioCode]

@zmaplex
呃，我当然知道啊。但重点在于为什么啊……
这个回答讲，好像是由于 entry 这个概念。https://stackoverflow.com/a/75885252/10553078

[thevita]

这样，你把 render tree 分别打出来看就明白了

```
.....

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

......

```


https://codesandbox.io/s/shy-firefly-3xt4ck




props:
children: Array(2)
0: {$$typeof: Symbol(react.element), key: null, ref: null, props: {…}, type: ƒ, …}
1: {$$typeof: Symbol(react.element), type: 'button', key: null, ref: null, props: {…}, …}

https://codesandbox.io/s/quizzical-artem-5j8xqk



props:
children: Array(2)
0: {$$typeof: Symbol(react.element), key: null, ref: null, props: {…}, type: ƒ, …}
1: false
3: {$$typeof: Symbol(react.element), type: 'button', key: null, ref: null, props: {…}, …}



render tree 是不一样的， 后面 diff 的时候 前一种 是没办法识别 Counter 这个 element 的变化的


ps: 不写 react ，描述按我自己理解来的，但大概应该就是这个样子

[codehz]

你想哈既然 jsx 本质就是 js 语法糖，那如果直接用?:语法 react 怎么知道它是改了整个组件，还是单纯只改了 props 呢（组件相同，仅 props 不同，没有 key 的情况下如何区分？）
而&&的写法，因为分属于数组的两个不同位置，react 可以直接根据位置来推断是不是同一个组件
这与其说是 react 特意设计的特性，不如说是 jsx 语法转换的副作用（虽然 jsx 严格意义上也算是 react 的设计），不过好歹 react 给了一个文档说了

[vivipure]

这东西太不符合直觉了，按理来说每个组件都应该是自己的状态的，这个切换还能保留状态。

[hua123s]

就是因为 key 不一样，所以状态丢了。

[noe132]

第一种写法和
<Counter person={isPlayerA ? "Taylor": "Sarah"} />
是等价的。

React 对于同组件同位置的节点会在重新渲染时会被认为是同一个实例。
区分不同实例的方式是使用不同的 key 。

[lisongeee]

把 jsx 转换为 原生 js 就很直白了


你的第二个示例程序，返回的数组中当 isPlayerA 真时是 [Fc, null]，假时为 [null, Fc]
而第一个示例程序，返回的数组中当 isPlayerA 真时是 [Fc]，假时为 [Fc]，因此切换后状态不会丢失

[RabbitDR]

8 楼的图片很清晰了，前者通过三元算出来的在同一个位置，后者是真的两个不同的位置，这里的位置指 createElement 的入参。

[VisualStudioCode]

@vivipure 「这东西太不符合直觉了」

根据文档里讲的「快照机制」，应该也还好理解。
https://react.dev/learn/state-as-a-snapshot

[VisualStudioCode]

@lisongeee 谢谢讲解。

请问这是怎么转换的？

[lisongeee]

@VisualStudioCode

> 请问这是怎么转换的？

https://babeljs.io/repl

[SingeeKing]

本质上就是 children 是一个数组，每个语句会被转换成 children 的一个成员

使用 ?: 时是一个语句，也就对应一个成员
使用 && 时是两个语句了，也就对应两个不同的成员了

[HaroldFinchNYC]

@SingeeKing +1

[VisualStudioCode]

@vivipure
好吧，我也只是在学习中，不知道这一段文档是否跟快照机制有关。

[VisualStudioCode]

谢谢大家的帮助！我写在附言中写了个人总结。

@zmaplex @thevita @codehz @vivipure @hua123s @noe132 @lisongeee @RabbitDR @SingeeKing @HaroldFinchNYC @twelvechen @cugljd @netabare @lopssh @Mercpoff @finnlewis @ChellFong @19888888888x