📚 课程目录第1章状态提升概念与动机

1. 状态提升概念与动机：什么是状态提升、解决什么问题、单向数据流原则

我记得刚入行做 React 项目的时候，最头疼的就是组件之间共享数据。两个兄弟组件都要读同一个状态，我一开始复制了两次 —— 结果改了一个，另一个还停留在旧数据。后来一位老同事看了一眼我的代码，说了一句：“把状态放到它们共同的父组件里去。” 这就是状态提升（Lifting State Up）最朴素的样子。

1.1 什么是状态提升

说白了，就是把多个组件需要共享的 state，移动到离它们最近的共同父组件里，然后通过 props 向下传递。子组件不再自己管理那份状态，而是由父组件统一控制。

子组件只负责展示和触发回调
父组件持有状态并定义修改逻辑
兄弟组件通过父组件的中介实现同步

  核心思想： 数据向上流动，动作向下传递。所有共享状态只有一个“唯一可信源”（Single Source of Truth）。

1.2 解决什么问题

我在项目中遇到过一个真实场景：一个商品筛选面板（多选分类、价格区间、排序方式）和一个商品列表页，需要根据筛选条件实时更新列表。最初我把筛选状态散落在各个子组件里，结果每次筛选变更，列表组件根本感知不到。后来我把所有筛选条件提升到父组件 ProductPage 里，通过 useEffect 监听变化去请求数据，问题才彻底解决。

状态提升主要解决以下痛点：

痛点	表现	状态提升如何解决
数据不一致	两个组件显示同一份数据却不同值	统一由父组件管理，子组件只读 props
组件间通信困难	兄弟组件需要互相传值，只能靠回调层层转手	通过父组件集中处理，兄弟直接用 prop 同步
调试困难	不知道数据在哪被修改了	所有修改逻辑在父组件里，一目了然
状态逻辑重复	多个组件各自维护同一份状态的副本	只维护一份状态，减少冗余

1.3 单向数据流原则

React 提倡单向数据流（Unidirectional Data Flow）。意思是数据总是从父节点流向子节点，不会反过来。子组件如果需要改变数据，不能直接修改 props，而是通过父组件提供的回调函数来申请变更。

你想想看，为什么不能双向绑定？我以前也觉得双向绑定很直观。直到项目规模变大，数据流变成一团乱麻，我才明白单向数据流的好处：

可预测： 只看 props 就能知道组件的当前状态来自哪里
易调试： 每条数据变更都有明确的源头（父组件的 setState）
可维护： 新增或修改逻辑时，不会牵一发动全身

我曾经在重构一个购物车组件时，发现四个子组件各自维护了一份商品数量状态，最终需要同步时产生了竞态条件。把状态提升到购物车父组件后，用一个 reducer 统一管理，bug 瞬间清零。

1.4 简单示例：温度转换器

React 官方文档里经典的例子：摄氏度和华氏度两个输入框，输入一个另一个自动转换。如果不提升状态，我们要写两组 state 并在两个组件里互相监听，代码容易乱套。提升后，父组件 Calculator 管理唯一温度值，通过 scale 标明当前单位。

function Calculator() {
  const [temperature, setTemperature] = useState('');
  const [scale, setScale] = useState('c');

  function handleCelsiusChange(value) {
    setTemperature(value);
    setScale('c');
  }

  function handleFahrenheitChange(value) {
    setTemperature(value);
    setScale('f');
  }

  const celsius = scale === 'f' ? tryConvert(temperature, toCelsius) : temperature;
  const fahrenheit = scale === 'c' ? tryConvert(temperature, toFahrenheit) : temperature;

  return (
    <div>
      <TemperatureInput
        scale="c"
        temperature={celsius}
        onTemperatureChange={handleCelsiusChange} />
      <TemperatureInput
        scale="f"
        temperature={fahrenheit}
        onTemperatureChange={handleFahrenheitChange} />
    </div>
  );
}

这里的 TemperatureInput 只接受 temperature 和 onTemperatureChange 两个 props，自己不再保存任何 state。我习惯把这种组件叫做“受控组件”——数据由外部控制。

1.5 什么时候不应该提升状态？

当然，不是所有状态都要提升。我在早期也犯过“把所有 state 都提到顶层”的毛病，结果一个简单的表单页，props 层层传递了五六层，改一个字段需要改三个文件。

避坑指南： 只提升需要共享的状态。如果一个状态只在一个组件内部使用，或者只在它自身及它的后代中使用，就没有必要提到更上级的父组件。过度提升反而会增加组件耦合度和重渲染次数。

记住一个简单判断标准：问自己“这个状态是否被两个或以上不相邻的组件同时读取？” 如果答案是“否”，就让它待在自己原来的地方。

1.6 状态提升与单向数据流的关系

状态提升是单向数据流在 React 中的具体实践手法。没有状态提升，单向数据流就只是一个口号。两者相辅相成：

单向数据流是设计原则
状态提升是实现手段

下面我画了一张图，帮你快速理清本章的核心脉络：

  一句话总结： 状态提升就是让所有需要共享数据的组件，通过共同的父组件来统一采买、统一分发。你只管写好自己的回调，数据自然会流向该去的地方。

嗯，这一章的内容到这里就结束了。单向数据流看起来简单，但我在项目中见过不少人刚开始会忍不住往子组件里塞 state，然后发现同步困难才回头重构。希望这一节能让你心里有个底：遇到共享数据的场景，先想想“能不能提升到父级”。