俺平时没事会逛逛reddit看看react的社区在聊什么，时不时就会遇到我没注意或不懂的点，此文为了记录这些问题，持续更新中。。。。。
react的状态保留
现象
先看一个例子
const [isNew, SetIsNew] = useState(true);
isNew && (<UserList list={list} />)
!isNew && (<UserList list={list} />)
这个是一个react的代码片段，isNew控制着渲染UserList组件，且都返回同样的组件，但这里在react的渲染调和机制里，不算同一个组件
换句话讲就是当我更新isNew的值时，UserList的状态不会保留。比如下面这个例子，当我点击change的时候，显示的数字会重置为最初的0。
当我用这种方式写则有不同的结果
const [isNew, SetIsNew] = useState(true);
isNew ? (<UserList list={list} />) : (<UserList list={list} />)
下面这个例子则会保留Test组件内部的状态
嘿嘿，是不是很奇妙？我想会有人跟我一样没去琢磨过这种现象吧哈哈，那为什么会有这种差异呢
原因
这个属于react的状态保留和重置的现象，在react官方文档中有描述：
- 处于相同位置的组件会保留state的状态
- 相同位置不同的组件不会保留state的状态
还有一种方式就是给两个组件加上不同的key，这样react就会显示用key来区别不同的组件了
