最近组里的同学问我在小程序里想重建一个组件要怎么办？背景是小程序里的表单渲染器内部设计估计有问题，有时候需要销毁重建。我之前也遇到过，处理方式也比较简单，给个 a:if 先 false 再 true 就可以实现了。同学说这么麻烦呀，PC里的只需要改下key就行，小程序是不支持这个吗？
我 React 用得不多，当时没理解啥是改 key 就行。因为 Vue 和小程序里的 key 都是用来优化列表渲染性能的，没什么别的效果。
后来看到 Solid 框架关于和 React 对比一节里又提到这个：
问了下 ChatGPT ，React 对 key 确实有特殊行为：
当给组件的key发生改变时，React将会重新创建该组件的实例，并重新挂载到DOM树上。这意味着之前的组件实例将会被销毁，其状态也会被重置。
在React中，每个组件实例都应该有一个唯一的key属性。当一个组件的key发生改变时，React会将其视为一个全新的组件，而不是简单地更新原有组件的props。这种重新创建和挂载的过程可以帮助React识别出哪些组件已经被改变，从而进行高效的更新。
需要注意的是，当组件的key发生改变时，React会将其视为一个全新的组件，因此可能会导致之前的组件实例的状态丢失。因此，在使用key属性时，应该确保它是稳定且唯一的，以避免意外的副作用。一种常见的做法是使用组件的唯一标识符作为其key值，例如数据库中的id字段。
重新创建实例会导致所有与组件生命周期相关的方法都会重新执行一遍。这也是为什么在使用key时要谨慎，以避免不必要的重新创建和执行生命周期方法。
而在Vue中，组件的key属性不会引起类似的重新创建和挂载行为。Vue中的key属性主要用于优化列表渲染时的性能，以便正确地跟踪每个列表项的状态。当列表发生变化时，Vue会尽可能复用已经存在的组件实例，并且不会销毁和重新创建它们。
在官方文档里也搜了下，相关内容可参考：
- https://react.dev/reference/react/useState#resetting-state-with-a-key
- https://react.dev/learn/preserving-and-resetting-state#option-2-resetting-state-with-a-key
虽然默认的 key 属性就可以触发组件的重新渲染很方便，但其实如果我们把数据流给响应化掉，解决掉表单的bug，直接传递正确的数据显然是更正确和方便的办法。