当前位置: 首页 > news >正文

React中的“虫洞”——Context

当我们写React时,我们总是通过改变State和传递Prop对view进行控制,有时,也会遇到一点小麻烦。

背景

但是随着我们的应用变的越来越复杂,组件嵌套也变的越来越深,有时甚至要从最外层将一个数据一直传递到最里层(比如当前user的信息)。

理论上,通过prop一层层传递下去当然是没问题的。不过这也太麻烦啦,要是能在最外层和最里层之间开一个穿越空间的虫洞就好了。

幸运的是,React的开发者也意识到这个问题,为我们开发出了这个空间穿越通道 —— Context。

使用

看起来很高大上的Context使用起来却异常简单。

基本使用

假设我们有下面这样的组件结构。

clipboard.png

D组件需要获取在A组件中用户信息应该怎么办?有了Context,我们可以这么做。

// Component A
class A extends React.Component {
// add the following method
  getChildContext() {
    return {
      user: this.props.user
    }
  }
  
  render() {
    return <div>{this.props.children}</div>
  }
}
// add the following property
A.childContextTypes = {
  user: React.PropTypes.object.isRequired
}


// Component D
class D extends React.Component {
  render() {
    return <div>{this.context.user.name}</div>
  }
}
// add the following property
D.contextTypes = {
  user: React.PropTypes.object.isRequired
}

很简单吧,只要在外层定义一个getChildContext方法,在父层和里层分别制定contextTypes就可以直接在里层用this.context访问了,是不是很厉害,XD

在lifecycle方法中使用

根据官方的文档,Context在以下的lifecycle方法中也是可以使用的

void componentWillReceiveProps(
  object nextProps, object nextContext
)

boolean shouldComponentUpdate(
  object nextProps, object nextState, object nextContext
)

void componentWillUpdate(
  object nextProps, object nextState, object nextContext
)

void componentDidUpdate(
  object prevProps, object prevState, object prevContext
)

stateless组件中使用

同时,在最新的stateless组件中,也是可以使用Context的,而且更加简单。

function D(props, context) {
  return (
    <div>{this.context.user.name}</div>
  );
}
D.contextTypes = {
  user: React.PropTypes.object.isRequired
}

使用场景

既然Context使用起来如此方便,是不是就应该多多用它呢?
显然,抛开Context还处于刚刚公开,API不稳定不说,即使对于组件化的开发,到处用也不是一个好主意。
Context就像javascript中的全局变量,只有真正全局的东西才适合放在context中。

比如:

  • 当前用户信息
  • flux、redux的store
  • session级别信息(语言,主题等)

所以,当发现使用Context仅仅为了少打几个字而不考虑存放何种数据,那很可能用错Context了……

相关文章:

  • 第二天(tomcat与web程序结构与Http协议与HttpUrlConnection)
  • Mac 自定义Terminial
  • C学习笔记(七)C控制语句:分支和跳转
  • 文档对象模型-DOM(一)
  • 盛一平自我介绍
  • 《Java高级程序设计》第二次作业
  • 在PHP中常遇到的变量处理函数库(isset()、unset()、empty、is_array...
  • Asp.Net中级 - 5.HttpHandler案例
  • Bootstrap学习笔记(一)-----表单
  • MySQL体系结构图
  • [JMS 3] ActiveMQ实现简单的helloworld
  • nullnull阿里巴巴2013实习生招聘笔试题
  • iOS:OC与JS交互
  • 从C到iOS基础知识各阶段的书籍及提高实战图书推荐
  • [nginx] 网上最全面nginx教程(近100篇文章整理)
  • 分享一款快速APP功能测试工具
  • CNN 在图像分割中的简史:从 R-CNN 到 Mask R-CNN
  • java中具有继承关系的类及其对象初始化顺序
  • js递归,无限分级树形折叠菜单
  • Lsb图片隐写
  • opencv python Meanshift 和 Camshift
  • tab.js分享及浏览器兼容性问题汇总
  • vue2.0开发聊天程序(四) 完整体验一次Vue开发(下)
  • 前端每日实战 2018 年 7 月份项目汇总(共 29 个项目)
  • ​​快速排序(四)——挖坑法,前后指针法与非递归
  • ###51单片机学习(2)-----如何通过C语言运用延时函数设计LED流水灯
  • (1)安装hadoop之虚拟机准备(配置IP与主机名)
  • (C语言)编写程序将一个4×4的数组进行顺时针旋转90度后输出。
  • (一)VirtualBox安装增强功能
  • (转)Windows2003安全设置/维护
  • (转)关于多人操作数据的处理策略
  • .NET “底层”异步编程模式——异步编程模型(Asynchronous Programming Model,APM)...
  • .NET Framework Client Profile - a Subset of the .NET Framework Redistribution
  • .NET/C# 使用反射调用含 ref 或 out 参数的方法
  • .NET/C# 在 64 位进程中读取 32 位进程重定向后的注册表
  • [ Algorithm ] N次方算法 N Square 动态规划解决
  • [AutoSar NVM] 存储架构
  • [codevs 1296] 营业额统计
  • [Docker]三.Docker 部署nginx,以及映射端口,挂载数据卷
  • [ICCV2017]Neural Person Search Machines
  • [Java基础]—JDBC
  • [MRCTF2020]Ez_bypass1
  • [NodeJS]NodeJS基于WebSocket的多用户点对点即时通讯聊天
  • [Python] 输入与输出
  • [RK-Linux] RK3399支持M.2 NVMe SSD启动
  • [ThinkPHP]Arr返回1
  • [Unity3D]--更换天空盒子
  • [毕设]基于STM32的语音识别智能蓝牙音箱设计
  • [答案V0.1版]精选微软等数据结构+算法面试100题 [前20题]
  • [导入]MsAjax Lib- Number 类型扩展
  • [基础服务] CentOS 7.x 安装NodeJS环境并搭建Hexo
  • [精华][推荐]CAS SSO 单点登录框架学习 环境搭建
  • [啃书]身体使用手册 --《You:The owner's manual》
  • [论文阅读]4DRadarSLAM: A 4D Imaging Radar SLAM System for Large-scale Environments
  • [每周一更]-(第85期):NLP-实战操作-文本分类