一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第3天，点击查看活动详情。

一、React useContext简介

React 的 Context API 是一种在应用程序中深入传递数据的方法，而无需手动一个一个在多个父子孙之间传递 prop。当咱们需要的只是传递数据时，它可以作为像Redux这样的工具的一个很好的替代。

函数式组件用例展示：

import React from "react";
import ReactDOM from "react-dom";

/* 
1.需要引入createContext,useContext 
2.通过createContext来创建句柄 
3.Context.Provider来确定共享范围 
4.通过value来分发内容 5.在子组件中通过useContext（Context句柄）来获取数据 
*/

// 创建 Context
const NumberContext = React.createContext();
// 它返回一个具有两个值的对象
// { Provider, Consumer }

function App() {
  cosnt state={
              new:'new',
              old:['old']
            }
  // 使用 Provider 为所有子孙代提供 value 值 
  return (
    <NumberContext.Provider value={state}>
      <div>
        <Display />
      </div>
    </NumberContext.Provider>
  );
}

function Display() {
  // 使用 Consumer 从上下文中获取 value
  return (
    <NumberContext.Consumer>
      {value => <div>The answer is {value}.</div>}
    </NumberContext.Consumer>
  );
}

ReactDOM.render(<App />, document.querySelector("#root"));

在 Hooks 环境中，依旧可以使用 Consumer，但是 ContextType 作为类静态成员肯定是用不了。Hooks 提供了 useContext,不但解决了 Consumer 难用的问题同时也解决了　contextType 只能使用一个 context 的问题。

二、使用 useContext 方式

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

import React, { useContext } from 'react';

//调用useContext，传入从`React.createContext`获取的上下文对象。
//唯一需要注意的是你必须将整个上下文对象传递给useContext - 而不仅仅是Consumer，

function Display() {
//获取到父组件传递过来的数据，对象/数组/值
  const value = useContext(NumberContext);
  return <div>The answer is {value}.</div>;
}

三、嵌套的 Consumers 和 useContext

你可能遇到这样的情况，咱们的组件需要从多个父上下文中接收数据，从而导致这样的代码

//Consumers
function HeaderBar() {
  return (
  //父组件1   
  //回掉user就是该组件传递的数据
    <CurrentUser.Consumer>
      {user =>
      //父组件2
        <Notifications.Consumer>
          {notifications =>
            <header>
              Welcome back, {user.name}!
              You have {notifications.length} notifications.
            </header>
          }
      }
    </CurrentUser.Consumer>
  );
}
------------------
//useContext
function HeaderBar() {
//先接受多个组件的传递的数据，处理数据后再做页面交互
  const user = useContext(CurrentUser);
  const notifications = useContext(Notifications);
  return (
    <header>
      Welcome back, {user.name}!
      You have {notifications.length} notifications.
    </header>
  );
}

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

Hook 会触发重渲染，也可以借助 useEffect 实现函数组件的页面动态渲染，可查看-我的掘金博文 useEffect的使用 文章