组件间共享数据

组件间通信一般有以下几种可能：

• 父传子
• 子传父
• 兄弟组件
• 多层级组件

父传子（Props）

这是最基础，也是最常见的

function Parent() {
  const [count, setCount] = useState(10);

  return <Child count={count} />;
}

function Child({ count }) {
  return <div>{count}</div>;
}

通过向子组件添加属性的方式传递值，子组件只需在方法参数中接收即可

数据流：

Parent
  │
  │ props
  ▼
Child

子传父（Props + 回调）

如果子组件想要修改父组件的数据，可以把 setCount 也传下来，或者传来一个供执行的回调函数。

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

  return (
    <Child
      count={count}
      setCount={setCount}
    />
  );
}

function Child({ count, setCount }) {
  return (
    <button onClick={() => setCount(count + 1)}>
      {count}
    </button>
  );
}

以执行父组件函数的方式影响父组件。

兄弟组件（提升到共同父组件）

Parent
├── A
└── B

A 和 B 需要共享 count。

不要让 A 直接传给 B，而是把数据放到父组件 Parent 中:

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

  return (
    <>
      <A count={count} setCount={setCount} />
      <B count={count} />
    </>
  );
}

结构：

       Parent
      /      \
     A        B
     │        ▲
     └─修改───┘

通过父组件 Parent 来对此数据进行管理，这是React一个非常重要的思想

状态提升

多层组件共享（Context）

如果：

App
 └─ A
     └─ B
         └─ C
             └─ D

如果一个数据要从A传到D，那么就要层层传递，非常麻烦。

这时可以使用 Context。

起始组件：

import { createContext, useState } from 'react'
import A from './A'

export const CountContext = createContext({
    count: 0,
    setCount: () => {}
})
function App() {
    const [count, setCount] = useState(0)
    return (
        <>
            <CountContext.Provider value={{count, setCount}}>
                <div>Page</div>
                <A />
            </CountContext.Provider>
        </>
    )
}

export default App

目标组件:

import { useContext } from "react"
import { CountContext } from "./App"

function D() {
    const context = useContext(CountContext)

    if (!context) {
        throw new Error("Child must be inside CountContext");
    }
    return (
        <>
            <div>{context.count}</div>
        </>
    )
}

export default D

• createContext: 创建Context的函数，创建时可以传入默认值或 undefined
• <XXX.Provider value=>: XXX 根据创建 Context 的时候接收的变量而定，value是要向内部传递的值
• useContext：获取Context的值

通过这种方式不需要一层一层的传递，在需要用的时候直接从 Context 获取即可。