React 学习——Context机制层级组件通信

核心思路：（适用于所有层级，不仅仅是爷孙 父子）

1. createContext方法创建一个上下文对象
2. 在顶层组件 通过Provider组件提供数据
3. 在底层组件，通过useContext钩子函数使用数据

import { createContext, useContext  } from "react"
const msgContext = createContext();
function A(){
  const AMsg = '我是A组件的消息'
  return (
    <div>
      A组件
      <B />
    </div>
  )
}
function B(){
  const bMsg = useContext(msgContext)
  return (
    <div>
      B组件-{bMsg}
    </div>
  )
}

function App(){
  const msg = 'this is App组件'
  return (
    <div>
      App组件
      <msgContext.Provider value={msg}>
        <A />
      </msgContext.Provider>
    </div>

  )
}
export default App