使用react的好处_React Context(上下文) 作用和使用 看完不懂 你打我

日常记录一下学习到的知识点吧。好记性不如烂笔头~ 我相信这是对的。

官方文档 的demo已经很棒了。但我觉得我的描述会让你更容易理解。

自己无聊倒腾了小程序 欢迎大家测试使用~

gh_af88ca3ac9c4_430.jpg

1.Context

Context 通过组件树提供了一个传递数据的方法，从而避免了在每一个层级手动的传递 props 属性。

有部分小伙伴应该使用props属性进行组件向下传值的操作。当多个组件嵌套时候。你就需要慢慢向上寻找最初的值是什么~(手动微笑,恶心吧 )

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

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

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

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

/*里面可以渲染对应的内容*/

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

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

3.react脚手架快速搭建

命令行按顺序执行以下代码：

npm install -g create-react-app

create-react-app demo

yarn start

4.demo

在上面 脚手架添加 son.js 、grandson.js 并修改App.js内容。项目结构自行调整：

项目结构.jpg

代码效果图：

demo效果图.png

App.js 父组件

//App.js

import React from 'react';

import Son from './son';//引入子组件

// 创建一个 theme Context,

export const {Provider,Consumer} = React.createContext("默认名称");

export default class App extends React.Component {

render() {

let name ="小人头"

return (

//Provider共享容器 接收一个name属性

父组件定义的值:{name}

);

}

}

son.js 子组件

//son.js 子类

import React from 'react';

import { Consumer } from "./index";//引入父组件的Consumer容器

import Grandson from "./grandson.js";//引入子组件

function Son(props) {

return (

//Consumer容器,可以拿到上文传递下来的name属性,并可以展示对应的值

{( name ) =>

子组件。获取父组件的值:{name}

{/* 孙组件内容 */}

}

);

}

export default Son;

grandson.js 孙组件

//grandson.js 孙类

import React from 'react';

import { Consumer } from "./index";//引入父组件的Consumer容器

function Grandson(props) {

return (

//Consumer容器,可以拿到上文传递下来的name属性,并可以展示对应的值

{(name ) =>

孙组件。获取传递下来的值:{name}

}

);

}

export default Grandson;

运行上述代码。相信小伙伴对 React context 的作用 以及使用有了一定的了解。当然还有其他场景的使用，可直接看官方context文档 这个文章作为自己学习记录。也希望帮助到需要的小伙伴们。

有不对的地方 希望小伙伴 及时指正。谢谢