"lifting state up" 是什么意思，它与 prop drilling 有什么关系？

Question

Accepted Answer

当**两个组件需要共享同一个 state** 时，你将那个 state "提升"到它们最近的公共 ancestor，并通过 props 将其向下传递，这样就有了单一的事实来源。 ```jsx function Parent() { const [query, setQuery] = useState(""); // state lives in the common parent return ( <> {/* both children share the SAME state */} ); } ``` 如果每个 child 都保持自己的 `query`，它们会失去同步。提升 state 意味着输入和结果始终保持一致。 ## 为什么这很重要将 state 提升得过高可能会迫使你通过许多中间组件传递 props，而这些组件并不使用它们： ```jsx {/* just forwarding */} {/* just forwarding */} {/* finally used here */} ``` ## 如何缓解 - **Composition**：将 JSX 作为 `children` 传递，这样数据就留在使用它的地方，而不是被强行穿过去。 - **Context** 用于真正的全局数据（主题、当前用户）。 - 对于大型共享 state，使用 **state library**（Zustand/Redux）。指导原则：**只将 state 提升到需要的高度——不要过高。** 过度提升会导致大范围重新渲染和 prop drilling；提升不足则会导致不同步的重复。