组件间共享数据

问题：各自独立的状态

// 每个按钮有自己独立的 count
function MyApp() {
  return (
    <div>
      <MyButton />
      <MyButton />
    </div>
  );
}

解决：提升状态

将状态提升到最近的共同父组件，通过 props 传递：

export default function MyApp() {
  const [count, setCount] = useState(0);

  function handleClick() {
    setCount(count + 1);
  }

  return (
    <div>
      <h1>计数器一起更新</h1>
      <MyButton count={count} onClick={handleClick} />
      <MyButton count={count} onClick={handleClick} />
    </div>
  );
}

function MyButton({ count, onClick }) {
  return <button onClick={onClick}>点击了 {count} 次</button>;
}

这就是"提升状态（Lifting State Up）"的概念。

---

Context 上下文

用于跨组件层级共享数据，避免层层传递 props

创建 Context

const MyContext = React.createContext("defaultValue");
const { Provider, Consumer } = MyContext;

使用 Context

Provider 提供数据

<MyContext.Provider value={contextValue}>
  <ChildComponent />
</MyContext.Provider>

Consumer 消费数据（函数组件）

<MyContext.Consumer>{(value) => <div>{value}</div>}</MyContext.Consumer>

类组件使用 contextType

class MyClassComponent extends React.Component {
  static contextType = MyContext;
  render() {
    return <div>{this.context}</div>;
  }
}

多个 Context

<BorderProvider value={borderValue}>
  <ColorProvider value={colorValue}>
    <ChildComponent />
  </ColorProvider>
</BorderProvider>

Context 嵌套规则

Consumer 会读取最近的 Provider 的值

---