这样,你把 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-3xt4ckprops:
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-5j8xqkprops:
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 ,描述按我自己理解来的,但大概应该就是这个样子