React Context and useContext使用指南

【中文官网文档】

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

在一个典型的 React 应用中，数据是通过 props 属性自上而下（由父及子）进行传递的，但这种做法对于某些类型的属性而言是极其繁琐的（例如：地区偏好，UI 主题），这些属性是应用程序中许多组件都需要的。Context 提供了一种在组件之间共享此类值的方式，而不必显式地通过组件树的逐层传递 props。

如果你学过angularjs 那么可以理解为是：$rootScope。

简述重点

1.Context

Context 通过组件树提供了一个传递数据的方法，从而避免了在每一个层级手动的传递 props 属性。
有部分小伙伴应该使用props属性进行组件向下传值的操作。当多个组件嵌套时候。你就需要慢慢向上寻找最初的值是什么!

2.API (个人大白话理解)

React.createContext：创建一个上下文的容器(组件), defaultValue可以设置共享的默认数据

const {Provider, Consumer} = React.createContext(defaultValue);

Provider(生产者): 和他的名字一样。用于生产共享数据的地方。生产什么呢？那就看value定义的是什么了。value:放置共享的数据。

<Provider value={/*共享的数据*/}>  
    /*里面可以渲染对应的内容*/
</Provider>

Consumer(消费者):这个可以理解为消费者。他是专门消费供应商(Provider 上面提到的)产生数据。Consumer需要嵌套在生产者下面。才能通过回调的方式拿到共享的数据源。当然也可以单独使用，那就只能消费到上文提到的defaultValue

<Consumer>  
  {value => /*根据上下文  进行渲染相应内容*/}
</Consumer>

hook useContext()

hook函数是React 16.8后新推出的特性，可以取代class的写法。

版本要求 react > 16.8

步骤 1.创建Context
2.使用MyContext.Provider提供value
3.使用useContext(MyContext)获得数值value

//MainPage.js
import React from 'react'  
import ChildPage from './ChildPage'  
export const MyContext = React.createContext();  
function MainPage(){  
    return (
        <div>
            <MyContext.Provider value ='Hello world'>
                 <ChildPage />
            </MyContext.Provider>
        </div>
    )
}
export default MainPage;

//ChildPage.js
import React from 'react'  
import {MyContext} from './MainPage'  
function ChildPage(){  
    return (
        <p>{useContext(MyContext)}</p>
    )
}
export default ChildPage;

易错点 useContext是新增的Hook函数，目前版本（16.8）里只能在function函数体内使用，不要在class组件内使用，也不要在条件语句内使用

Context需要在多个文件中传递数据，所以要在定义Context的地方加入export，在需要使用数据地方import进来，注意import的时候一定要加上花括号{MyContext}（原因请关注默认export和命名export的区别）

不要在一个文件中provider提供完数据后，马上useContext消费数据，可能会取不到值。

[本文部分内容来自互联网]