useContext的使用

使用步骤：

1. 导入createContext ，使用createContext 创建Context对象

2. 在顶层组件通过Provider 提供数据

3. 在底层组件通过useContext函数获取数据

代码实例： 

1.顶层组件

import { createContext, useState } from "react"

const Context = createContext()

function App () {
  const [count, setCount] = useState(0)
  return (
    <Context.Provider value={count}>
      <div>
        <SonA />
        <button onClick={() => { setCount(count + 1) }}>++</button>
      </div>
    </Context.Provider>
  )
}

2.底层组件SonA 

function SonA () {
  const value = useContext(Context)
  return (
    <div>
      this is SonA
      app组件传过来的值：{value}
      <SonB />
    </div>

  )
}

3.底层组件SonB

function SonB () {
  const value = useContext(Context)
  return (

    <div>
      this is SonB
      app组件传过来的值：{value}
    </div>

  )
}

 完整代码实例

import { createContext, useContext, useState } from "react"

function SonA () {
  const value = useContext(Context)
  return (
    <div>
      this is SonA
      app组件传过来的值：{value}
      <SonB />
    </div>

  )
}


function SonB () {
  const value = useContext(Context)
  return (

    <div>
      this is SonB
      app组件传过来的值：{value}
    </div>

  )
}


const Context = createContext()

function App () {
  const [count, setCount] = useState(0)
  return (
    <Context.Provider value={count}>
      <div>
        <SonA />
        <button onClick={() => { setCount(count + 1) }}>++</button>
      </div>
    </Context.Provider>
  )
}

运行结果：