【中文官网文档】
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消费数据,可能会取不到值。
[本文部分内容来自互联网]