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消费数据,可能会取不到值。

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

Author image

漫步

一粒云产品经理



转载请注明:一粒云官方博客 »