前端面试 P084：状态提升、单一来源与范围选择

来源：方格前端讲面试 · 14.“状态提升”这种模式有哪些优缺点？，10 分 28 秒。

回看定位：01:27 定义 · 03:46 温度示例 · 08:47 权衡

最近的合理共同拥有者

多个组件需要同步状态时，将共享部分交给最近的合理共同父级，通过 props 给出值与更新回调。温度转换器可以保存当前输入值与单位，另一单位通过计算派生，避免存两份彼此同步的数据。

function TemperatureInput({ label, value, onChange }) {
  return <label>{label}<input value={value}
    onChange={event => onChange(event.target.value)} /></label>;
}

父组件保存原始字符串输入并解析校验，才能合理处理空字符串、小数输入中的中间状态。不要只因最终温度是数字，就把所有输入过程强制转成数字。

更新请求不是自动冒泡

子组件调用父传入的函数是明确调用，不是任意组件消息自动向上冒泡。共享是状态归属的设计，不是兄弟组件绝对不能通过其他合法机制协作。

不要提升所有状态

局部 hover、某项的独立草稿等可留在子层。把每个字段都提升到顶层，会扩大变更范围和传参复杂度。反过来，层级多也不必马上上全局库，先比较组件组合、Context 和外部状态的实际需要。

父组件更新可能带来后代计算，但并非所有情况下整棵子树都必然重新执行，更不是所有 DOM 都重建。性能问题应测量，Context 也不会自动解决所有重渲染。

本集强调单一数据源的方向正确；“唯一来源”针对需要协作的那份状态，不意味着应用只能有一个全局 state。

关联：前端面试 P075：props 只读、状态归属与派生数据、前端面试 P086：Context 拆分与订阅更新边界。