导航

HTML

CSS

JavaScript

浏览器 & 网络

版本管理

框架

构建工具

TypeScript

性能优化

算法

UI、组件库

Node

业务技能

针对性攻坚

AI

软实力

为什么会有“数据提升”

先看一个必然会出问题的场景👇

function ChildA() {
  const [count, setCount] = React.useState(0);
  return <button onClick={() => setCount(count + 1)}>A: {count}</button>;
}

function ChildB() {
  const [count, setCount] = React.useState(0);
  return <div>B: {count}</div>;
}

❓ 需求： A 点按钮，B 显示同一个 count

❌ 做不到

原因很关键：

React 中 state 只能向下流动，兄弟组件之间不能直接通信

什么是数据提升

把原本定义在子组件中的 state，提升到它们最近的公共父组件中，由父组件统一管理，再通过 props 分发给子组件

一句话总结：

谁用数据，数据就放谁的“最近公共祖先”

数据提升的核心原则

  1. 状态向下流（props）
  2. 事件向上传（callback）
  3. 共享状态放在公共父组件

数据提升

两个组件（无父子关系）同享一个数据并且同步数据变化

function Parent() {
  const [count, setCount] = React.useState(0);

  return (
    <>
      <ChildA count={count} onAdd={() => setCount(count + 1)} />
      <ChildB count={count} />
    </>
  );
}

function ChildA({ count, onAdd }) {
  return <button onClick={onAdd}>A: {count}</button>;
}

function ChildB({ count }) {
  return <div>B: {count}</div>;
}

发生了什么？

ChildA 触发事件
↓
调用 Parent 的 setCount
↓
Parent state 更新
↓
Parent 重新 render
↓
ChildA / ChildB 同步更新

数据提升的本质

数据提升不是 API，是一种状态设计策略

它解决的是：