key、表单与共享状态如何选择

先理解原理和示例,再练习完整口述与追问。

组件身份;受控契约;状态靠近使用者。

表单先决定谁是事实来源:受控输入由 state 决定 value,非受控输入由 DOM 保留值。列表与编辑器的 key 决定状态跟随哪个实例,不能用 index 或随机 key 随意重置。多个组件需要共同编辑同一数据时,把状态提升到最近共同所有者,或使用合适共享源;组件内部草稿与已保存数据仍应分离。

两个预览面板与一个编辑表单共享 user,由父级保存已确认状态,表单用独立 draft 支持取消。切到另一 user 时按产品规则重置草稿或按 ID 缓存;key={user.id} 可强制实例重建,但不是保存多份草稿的替代。列表排序后测试焦点、输入和错误消息是否仍归属正确记录。

受控输入不应从 undefined 意外切成字符串;defaultValue 不负责持续同步。把全部表单都上升全局会扩大更新和清理范围,只有真实共享需求才共享。

稳定 key 让本地状态跟随业务对象,换 key 可有意重置。受控表单用 value/checked 和回调维持唯一来源,defaultValue 只负责非受控初值。共享状态先提升到公共父级,跨层用 Context,复杂跨页面再用外部 store;Context 不自动提供所有缓存与细粒度订阅能力。