React无需Effect重置state时父组件直接传key有何差异？

两种写法实际运行效果完全没有区别，不需要为了贴合官方示例强行拆分无业务逻辑的套娃组件，完全可以根据场景选择写法。

先讲底层逻辑：React里的key是同层级组件的身份标识，只要key值发生变化，React会直接销毁旧组件实例、清空其所有内部状态，重新挂载新的组件实例。只要key的取值规则一致（均绑定当前选中联系人的id），不管key是直接绑定在父组件渲染的EditContact上，还是绑定在外层透传组件包裹的内层表单组件上，触发的状态重置效果完全相同。

两种写法的本质差异不在功能，而在逻辑封装的边界：

• 直接在父组件传key的写法：将「切换联系人时重置表单状态」的实现逻辑交给了组件调用方负责。如果后续其他页面/模块也要复用EditContact，所有调用方都必须记得传入对应联系人id作为key，一旦漏传就会出现切换联系人后表单残留旧数据的bug。
• 官方拆分两层组件的写法：将状态重置逻辑完全收敛封装在EditContact组件内部。调用方只需要正常传入savedContact和onSave属性即可，不需要感知组件内部的状态重置实现，组件自身可以保证切换联系人时状态正确，对调用方更友好，也能减少人为疏漏导致的问题。

实际开发可以按场景选型：

• 如果EditContact是仅在单个页面使用的私有组件，直接在父组件传key即可，代码更简洁，没有任何问题。
• 如果EditContact是会在多处复用的公共组件，推荐使用官方的封装写法，将内部逻辑收敛在组件内，降低调用方的使用成本和出错概率。

内容的提问来源于stack exchange，提问作者zapala.grzegorz