React组件缓存问题：点击不同按钮为何初始props一致？

这个问题的核心在于React的组件复用机制和useState的初始化特性：

• React Diff算法的组件复用逻辑：当你切换按钮0和1时，React对比前后渲染的组件，发现都是Test类型的组件，在没有指定key属性的情况下，React会选择复用已有的组件实例，而不是销毁旧实例、创建新实例。
• useState初始值的生效时机：useState的初始参数只在组件首次挂载的时候执行一次，组件后续的重新渲染会直接读取当前的状态值，忽略初始参数。所以第一次点击按钮0时，Test组件挂载，useState用传入的props.isTrue（值为True）初始化状态；当你点击按钮1时，虽然props.isTrue变成了False，但React复用了之前的Test实例，useState不会重新执行初始化逻辑，状态还是保留第一次的True，所以打印结果不符合预期。
• key属性的作用：给Test组件添加key后，React会把不同key值的组件判定为完全不同的实例。点击按钮1时，key发生变化，React会销毁之前的Test实例，重新创建一个新的Test组件实例，此时useState会用新的props.isTrue（值为False）初始化状态，就能得到你预期的打印结果。

内容的提问来源于stack exchange，提问作者user3908406