useContext

在用类声明 组件时，父子组件的传值是通过组件属性 props 进行的，现在使用 Function  来声明组件，已经没有了 constructor 构造函数也就没有了 props 的接收，父子组件的传值就成了一个问题，React Hooks 准备了 useContext ，它可以帮助我们跨域组件层级直接传递变量，实现共享。需要注意的是，useContext 和 redux 的作用是不同的，一个解决的是组件之间值传递的问题，一个是应用中统一管理状态的问题，但通过和 useReducer 的配合使用，可以实现类似 Redux 的作用。

Context 的作用就是对它所包含的组件树提供全局共享数据的一种技术。

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

const CountContext = createContext()  //createContext 创建 context, CountContext 是一个组件（父组件)

function Counter(){ //子组件，需要接收CountContext传过来的count
    const count = useContext(CountContext) //使用useContext 接收
    return (<p>Counter组件中点击次数：{count}</p>)
}

function HContext(){
    const [count,setCount] = useState(0)
    return (
        <div>
          <h3>点击次数：{count}</h3>
          <button onClick={()=>setCount(count+1)}>点击</button>
           <CountContext.Provider value={count}>
              <Counter />
           </CountContext.Provider>
        </div>
    )
}
export default HContext;

当前的 context 值由上层组件中距离当前组件最近的 <MyContext.Provider> 的 value prop 决定

当组件上层最近的 <MyContext.Provider> 更新时，该 Hook 会触发重渲染，并使用最新传递给 MyContext provider 的 context value 值

useContext 只是让你能够读取 context 的值以及订阅 context 的变化。你仍然需要在上层组件树中使用 <MyContext.Provider> 来为下层组件提供 context。