hooks中的 useContext

import React, { useContext, useState } from 'react'

// 创建一个context上下文，通过Provider向下层组件传递，下层组件使用useContext接受上层组件提供的value属性
// context上下文应用下层组件中的父子组件通信比较常见
const MyContext = React.createContext()

function Count() {

  const { count, setCount } = useContext(MyContext)

  return <button onClick={ () => setCount(count + 1) }>改变计数使其每次点击加 1 </button>
}

function GetCount() {

  // useContext必须接受一个context对象
  const context = useContext(MyContext)

  return <p>得到计算结果：{context.count}</p>
}

export default function App() {

  const [count, setCount] = useState(0)

  // 通过Provider的 value 向下层组件提供 参数
  return <MyContext.Provider value={{ count, setCount }}>

    <Count />
    <GetCount />

  </MyContext.Provider>
}