当前位置: 首页 > 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篇文章整理)
  • [iOS]Core Data浅析一 -- 启用Core Data
  • [译]前端离线指南(上)
  • create-react-app项目添加less配置
  • Django 博客开发教程 8 - 博客文章详情页
  • ESLint简单操作
  • Go 语言编译器的 //go: 详解
  • iOS 系统授权开发
  • iOS筛选菜单、分段选择器、导航栏、悬浮窗、转场动画、启动视频等源码
  • overflow: hidden IE7无效
  • 彻底搞懂浏览器Event-loop
  • 程序员最讨厌的9句话,你可有补充?
  • 紧急通知:《观止-微软》请在经管柜购买!
  • 模仿 Go Sort 排序接口实现的自定义排序
  • 那些年我们用过的显示性能指标
  • 使用API自动生成工具优化前端工作流
  • 为视图添加丝滑的水波纹
  • mysql面试题分组并合并列
  • ​如何在iOS手机上查看应用日志
  • #gStore-weekly | gStore最新版本1.0之三角形计数函数的使用
  • $refs 、$nextTic、动态组件、name的使用
  • (14)Hive调优——合并小文件
  • (day6) 319. 灯泡开关
  • (delphi11最新学习资料) Object Pascal 学习笔记---第8章第5节(封闭类和Final方法)
  • (Matalb时序预测)PSO-BP粒子群算法优化BP神经网络的多维时序回归预测
  • (附源码)计算机毕业设计SSM智慧停车系统
  • (含react-draggable库以及相关BUG如何解决)固定在左上方某盒子内(如按钮)添加可拖动功能,使用react hook语法实现
  • (六)什么是Vite——热更新时vite、webpack做了什么
  • (图)IntelliTrace Tools 跟踪云端程序
  • (未解决)jmeter报错之“请在微信客户端打开链接”
  • (一)u-boot-nand.bin的下载
  • (转)Groupon前传:从10个月的失败作品修改,1个月找到成功
  • (转)Oracle存储过程编写经验和优化措施
  • (转)拼包函数及网络封包的异常处理(含代码)
  • .bat批处理(十一):替换字符串中包含百分号%的子串
  • .h头文件 .lib动态链接库文件 .dll 动态链接库
  • .NET 4 并行(多核)“.NET研究”编程系列之二 从Task开始
  • .NET MVC第五章、模型绑定获取表单数据
  • .NET MVC之AOP
  • .NET 将多个程序集合并成单一程序集的 4+3 种方法
  • .NET 中使用 Mutex 进行跨越进程边界的同步