如何使用Context

一、Context

　　Context 提供了一个无需为每层组件手动添加 props，就能在组件树间进行数据传递的方法。

二、设计目的

　　Context 设计目的是为了共享那些对于一个组件树而言是“全局”的数据。

三、使用场景

　　Context 主要应用场景在于很多不同层级的组件需要访问同样一些的数据。请谨慎使用，因为这会使得组件的复用性变差。

四、使用Context三步骤

　　1、创建共享的Context

　　官方API：https://zh-hans.reactjs.org/docs/context.html#reactcreatecontext

const MyContext = React.createContext(defaultValue);

　　2、使用Provider提供创建的Context 的默认值值

　　官方API：https://zh-hans.reactjs.org/docs/context.html#reactcreatecontext

<MyContext.Provider value={/* 某个值 */}>

　　3、使用useContext获取Context的值

　　官方API：https://zh-hans.reactjs.org/docs/hooks-reference.html#usecontext

const value = useContext(MyContext);

五、使用Context的栗子

　　1、创建一个父组件，并创建共享Context

import React from 'react';
import ChildOne from './ChildOne';
let countValue = {
  count1: 1,
  count2: 2,
}
//创建一个共享的context,并导出，供子组件使用
export const CountValueContext = React.createContext(countValue);
export default () => {
  return (
    // 使用 Provider 提供 CountValueContext 的值，Provider所包含的子树都可以直接访问CountValueContext的值
    <CountValueContext.Provider value={countValue}>
      <ChildOne />
    </CountValueContext.Provider>
  );
}

　　2、创建一个子组件，使用共享Context

import React, { useContext } from 'react';
import { CountValueContext } from './index'
import ChildTwo from './ChildTwo';
export default () => {
  //使用共享 Context
  const countValue: any = useContext(CountValueContext);
  return (
    <div>
      <p>第一个组件获取到的count值:{countValue.count1}</p>
      <ChildTwo />
    </div>
  );
}

　　3、在子组件中再创建一个子组件，使用共享Context

import React, { useContext } from 'react';
import { CountValueContext } from './index'
export default () => {
  //使用共享 Context
  const countValue: any = useContext(CountValueContext);
  return (
    <div>
      <p>第二个组件获取到的count值:{countValue.count2}</p>
    </div>
  );
}

　　4、结果如下

　　

　　通过context，能在不同的组件拿到countValue不同的值。