ReactJs 高级篇一 Context 使用

React中Context主要解决了在多层级组件树种如果需要将最外层数据传递到最里层需要层层通过props属性进行传递，由此比较麻烦，所以React中出现了Context，比如我们在一个组件树中，每层都有可能用到用户信息。我们用Context在最外层进行创建全局上下文环境变量，付其初始默认值。在组件数中通过Context相关API都可以获取到。

Context主要API：

1，createContext(defVal)

const MyContext = React.createContext(defaultValue);

创建一个上下文对象，给一个默认值，默认值可以为字符串，或者对象{}等。在类外边进行创建类里面进行调用。

2，Context.Provider

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

在组件之外给其组件树环境中MyContext 赋值。在该组件内可以获取到的context值为相似组件中最近的赋值。如果没有使用Rrovider进行赋值，则获取到其默认值。注意：如果存在Provider其值为undefined，则仍使用undefined 不会去找默认值。

3，Class.contextType

contextTye 的写法有两种，一种在Class之外使用ClassName.contextType = MyContext;另一种则在Class内部使用 static contextTye= MyContext;

对该类进行如此设置之后，便可以在该类中通过 this.context 获取到MyContext中的值。

4，Context.Consumer

<MyContext.Consumer>{(value) => { return <span>value</span>}}
</MyContext.Consumer>

Consumer 内部为一个匿名函数对象，参数为Context中的值。我们在函数内部可以做一些其他逻辑，或者返回一个JSX对象。

5，在组件内部我们也可以更新Context中的值
具体操作可参考链接：https://react.docschina.org/docs/context.html#updating-context-from-a-nested-component

下面最后我们看一个之前层层传递props的代码以及使用Context的代码：

import React from 'react';
import ReactDOM from 'react-dom';//Context 用法
//用户基本信息
class UserBaseInfo extends React.Component {constructor(props){super(props);}render(){return (<div>用户名：{this.props.userName}</div>);}
}
//用户信息
class UserInfo extends React.Component {constructor(props){super(props);}render(){return (<UserBaseInfo userName={this.props.userName} />);}
}
//主页面
class MainApp extends React.Component {constructor(props){super(props);}render(){return (<UserInfo userName={this.props.userName} />);}
}ReactDOM.render(<MainApp userName="张三" />,document.getElementById('root'));

使用Context的代码：

import React from 'react';
import ReactDOM from 'react-dom';//1,React.createContext('默认名');
const UserContext = React.createContext('默认名');class UserBaseInfo extends React.Component {static contextType  = UserContext;render(){console.log(this.context);return (<div>用户名：{this.context.userName}<br/><UserContext.Consumer>{(value) => {return (<span>{value.userName}</span>);}}</UserContext.Consumer></div>);}
}
//用户信息
class UserInfo extends React.Component {render(){return (<UserBaseInfo  />);}
}
//主页面
class MainApp extends React.Component {static contextType render(){console.log(this.context);//2,Context.Providerreturn (<UserContext.Provider value={{userName:"zhangsan"}}><UserInfo /></UserContext.Provider>);}
}
//3,Class.contextType
MainApp.contextType = UserContext;
ReactDOM.render(<MainApp />,document.getElementById('root'));

ReactJs 高级篇一 Context 使用相关推荐

『高级篇』docker之开发课程EdgeService（16）
原创文章,欢迎转载.转载请注明:转载自IT人故事会,谢谢! 原文链接地址:『高级篇』docker之开发课程EdgeService(16) 课程的edgeService依赖于课程服务的dubbo服务,对 ...
『高级篇』docker之开发用户服务EdgeService（13）
原创文章,欢迎转载.转载请注明:转载自IT人故事会,谢谢! 原文链接地址:『高级篇』docker之开发用户服务EdgeService(13) 上一节开发了用户服务,即将开发的是用户服务EdgeServ ...
谷粒商城高级篇上（未完待续）
谷粒商城高级篇(上)保姆级整理之前整理了基础篇,Typora提示将近20000词,谷粒商城基础篇保姆级整理在学高级篇的时候,不知不觉又整理了两万多词,做了一阶段,先发出来,剩余部分整理好了再发.自 ...
程序猿必备技能之MySQL高级篇
MySQL是我们非常常用的关系型数据库,非常重要,所以在这里给大家整理下MySQL的高级内容. 1. MySQL高级特性 1.1. MySQL体系结构 Client Connectors: 接入方 ...
谷粒商城--订单服务--高级篇笔记十一
1.页面环境搭建 1.1 静态资源导入nginx 等待付款 --------->detail 订单页 --------->list 结算页 --------->confirm 收银页 ...
Redis高级篇-多级缓存
Redis高级篇资料下载 1.什么是多级缓存传统的缓存策略一般是请求到达Tomcat后,先查询Redis,如果未命中则查询数据库,如图: 存在下面的问题: •请求要经过Tomcat处理,Tomcat ...
2、Spring Boot尚硅谷笔记整理高级篇-消息
1.Spring Boot尚硅谷笔记整理高级篇-缓存 2.Spring Boot尚硅谷笔记整理高级篇-消息 3.Spring Boot尚硅谷笔记整理高级篇-检索 4.Spring Boot尚硅谷笔记整 ...
服务异常通讯高级篇二（死信交换机、DelayExchange延迟队列插件）
服务异常通讯高级篇二(死信交换机) 1.初始死信交换机当一个队列中的消息满足下列情况之一时,可以成为死信(dead letter): 消费者使用basic.reject或 basic.nack声明消 ...
Mysql优化高级篇（全）
目录前言 1. 简介 1.1 安装 1.2 MySQL逻辑架构 1.2.1 存储引擎 2. 索引优化分析 2.1 原因 2.2 常见通用的join查询 2.3 索引 2.3.1 索引分类 2.3.2 ...

ReactJs 高级篇一 Context 使用

ReactJs 高级篇一 Context 使用相关推荐

最新文章

热门文章