7.React Hook之useContext的介绍与使用

React的useContext应用场景：

如果想要组件之间共享状态，可以使用useContext。
React 的 Context API 是一种在应用程序中深入传递数据的方法，而无需手动一个一个在多个父子孙之间传递 prop。当咱们需要的只是传递数据时，它可以作为像Redux这样的工具的一个很好的替代。
使用 Context ,首先顶层先声明 Provier 组件，并声明 value属性，接着在后代组件中声明 Consumer 组件，这个 Consumer子组件，只能是唯一的一个函数，函数参数即是 Context 的负载。如果有多个 Context ,Provider 和 Consumer任意的顺序嵌套即可。

此外我们还可以针对任意一个 Context 使用 contextType 来简化对这个 Context 负载的获取。但在一个组件中，即使消费多个 Context,contextType 也只能指向其中一个。
在 Hooks 环境中，依旧可以使用 Consumer，但是 ContextType 作为类静态成员肯定是用不了。Hooks 提供了 useContext,不但解决了 Consumer 难用的问题同时也解决了　contextType 只能使用一个 context的问题。

标准方式

import React  from 'react';
import './App.css';
//创建context
const numberContext = React.createContext();
//它返回一个具有两个值的对象
//{Provider ， Consumer}
function App(){
  //使用Provider为所有子孙提供value值
  return (
    <numberContext.Provider value={12}>
        <div>
        <ShowAn />
        </div>
    </numberContext.Provider>
  )
}

function ShowAn(){
  //使用Consumer从上下文获取value
  return(
    <numberContext.Consumer>
      {value=><div>the answer is {value}</div>}
    </numberContext.Consumer>
  )
}
export default App;

使用useContext方式：

使用 useContext hook 来重写上面的示例

import React,{useContext}  from 'react';
import './App.css';
//创建context
const numberContext = React.createContext();
//它返回一个具有两个值的对象
//{Provider ， Consumer}
function App(){
  //使用Provider为所有子孙提供value值
  return (
    <numberContext.Provider value={520}>
        <div>
        <ShowAn />
        </div>
    </numberContext.Provider>
  )
}

function ShowAn(){
  //使用Consumer从上下文获取value
//调用useContext，传入从React.createContext获取的上下文对象。
  const value = useContext(numberContext);
  return(
    // <numberContext.Consumer>
      // {value=><div>the answer is {value}</div>}
    // </numberContext.Consumer>
    <div>
      the answer is {value}
    </div>

  )
}
export default App;

嵌套的 Consumers

组件需要从多个父上下文中接收数据，从而导致这样的代码.