【react】---context的基本使用---【巷子】
一、context的理解
很多优秀的React组件都通过Context来完成自己的功能,比如react-redux的<Provider />,就是通过Context提供一个全局态的store,拖拽组件react-dnd,通过Context在组件中分发DOM的Drag和Drop事件,路由组件react-router通过Context管理路由状态等等。在React组件开发中,如果用好Context,可以让你的组件变得强大,而且灵活
当你不想在组件树中通过逐层传递props或者state的方式来传递数据时,可以使用Context来实现跨层级的组件数据传递
使用context可以实现跨组件传递
二、如何使用context
如果要Context发挥作用,需要用到两种组件,一个是Context生产者(Provider),通常是一个父节点,另外是一个Context的消费者(Consumer),通常是一个或者多个子节点。所以Context的使用基于生产者消费者模式。
对于父组件,也就是Context生产者,需要通过一个静态属性childContextTypes声明提供给子组件的Context对象的属性,并实现一个实例getChildContext方法,返回一个代表Context的对象
1、getChildContext 根组件中声明,一个函数,返回一个对象,就是context
2、childContextTypes 根组件中声明,指定context的结构类型,如不指定,会产生错误
3、contextTypes 子孙组件中声明,指定要接收的context的结构类型,可以只是context的一部分结构。contextTypes 没有定义,context将是一个空对象。
4、this.context 在子孙组件中通过此来获取上下文
三、代码演示
目录结构
src/app.js
src/index.js
src/components/one.js
src/components/two.js
src/components/three.js
1、app.js
import React, { Component } from 'react';
import One from "./components/one";
import PropTypes from "prop-types";
class App extends Component { //根组件中声明,指定context的结构类型,如不指定,会产生错误
static childContextTypes = {
name:PropTypes.string,
age:PropTypes.number, }
//根组件中声明,一个函数,返回一个对象,就是context
getChildContext(){
return {
name:"zhangsan",
age:,
}
}; render() {
return (
<div>
<One/>
</div>
);
}
} export default App;
2、one.js
import React, { Component } from 'react'
import Two from "./two";
import PropTypes from "prop-types";
export default class One extends Component {
/*
contextTypes 子孙组件中声明,指定要接收的context的结构类型,
contextTypes 没有定义,context将是一个空对象。
*/
static contextTypes = {
name:PropTypes.string,
age:PropTypes.number
}
render() {
console.log(this)
return (
<div>
<Two/>
</div>
)
}
}
3、two.js
import React, { Component } from 'react'
import Three from "./three";
import PropTypes from "prop-types";
export default class Two extends Component {
static contextTypes = {
name:PropTypes.string,
age:PropTypes.number
}
render() {
console.log(this)
return (
<div>
<Three/>
</div>
)
}
}
4、three.js
import React, { Component } from 'react'
import PropTypes from "prop-types";
export default class Three extends Component {
static contextTypes = {
name:PropTypes.string,
age:PropTypes.number
}
render() {
console.log(this)
return (
<div> </div>
)
}
}
5、结果
四、总结
1、context在如下的生命周期钩子中可以使用
constructor(props, context)
componentWillReceiveProps(nextProps, nextContext)
shouldComponentUpdate(nextProps, nextState, nextContext)
componentWillUpdate(nextProps, nextState, nextContext)
componentDidUpdate(prevProps, prevState, prevContext)
2、context的局限性
1. 在组件树中,如果中间某一个组件 ShouldComponentUpdate return false 了,会阻 碍 context 的正常传值,导致子组件无法获取更新。
2. 组件本身 extends React.PureComponent 也会阻碍 context 的更新。
最新文章
- Java 泛型 <;? super T>; 中 super 怎么 理解?与 extends 有何不同?
- struts2 用if标签判断字符串包含
- html5 canvas标签
- 简单Spring和mybatis整合配置文件
- Spring.NET 的IOC(依赖注入)
- Java集合类从属关系
- 如何启用Oracle EBS Form监控
- Tracert(跟踪路由)是路由跟踪实用程序,用于确定 IP 数据包访问目标所采取的路径。
- powerDesigner生成数据结构图以及对应sql导出方法
- 【转】史上最详细的Composer安装tp5教程
- .net 操作web.config文件
- drf框架使用之 路飞学城(第一天)
- ImageMagick: win7 | win8 &; uac (用户帐户控制) 注册表的一些事
- servlet 获取 post body 体用流读取为空的问题【转】
- tlink平台数据转发 c# 控制台程序
- 有没有 linux 命令可以获取我的公网 ip, 类似 ip138.com 上获取的 ip?
- Python tricks(4) -- with statement
- 【Lua】模块与包
- 6大原则java
- 仿LordPE获取PE结构