什么是状态提升？

Question

什么是状态提升？

Accepted Answer

**状态提升**是指将状态从子组件移到**共同的父组件**，这样多个子组件可以共享并保持与相同数据的同步。当兄弟组件需要协调时，这是标准的解决方案。 ## 问题：兄弟组件需要共享数据 ```jsx // ❌ each child has its OWN state — they can't sync function TempInput() { const [temp, setTemp] = useState(0); ... } // Two sibling TempInputs (Celsius & Fahrenheit) can't see each other's value ``` 如果两个兄弟组件各自持有相关状态的副本，就没有办法让它们保持一致——改变一个不会影响另一个。 ## 解决方案：将状态提升到父组件 ```jsx function Calculator() { const [temperature, setTemperature] = useState(0); // state LIFTED to the parent return ( <> {/* pass state DOWN as a prop, and a setter to update it */}

Both inputs share one value: {temperature}

); } function TempInput({ value, onChange }) { return onChange(e.target.value)} />; } ``` 共享状态现在存在于父组件（`Calculator`）中。它将值作为 prop *向下*传递，并提供一个 setter，以便子组件可以请求更改（*向上*）。现在两个输入都反映相同的来源——编辑一个会更新两个。 ## 模式 ```text 1. Find the closest COMMON ancestor of the components that need to share 2. Move the state UP into that ancestor 3. Pass the value DOWN as props 4. Pass a callback DOWN so children can request updates (data up via events) ``` 这就是"数据向下流动，事件向上传递"的流程，用于实现状态共享。 ## 当状态提升过度时 ```text Lifting too high (state ends up far from where it's used) → prop drilling. At that point, prefer Context or a state library instead of lifting further. ``` ## 为什么这很重要状态提升是**在基于组件的框架中在兄弟组件/相关组件之间共享状态**的基本技术——它在共同的父组件中保持单一的数据来源，使子组件保持同步。在添加 Context 或 store 之前，这通常是*首先*考虑使用的工具。识别何时进行提升（兄弟组件需要协调）——以及何时提升已经过度（导致 prop drilling，是时候使用 Context/store）——是很好地组织组件状态的核心。