React中的“虫洞”——Context

muddyway 发布于2019-08-19 17:54 / 2828人阅读

摘要：理论上，通过一层层传递下去当然是没问题的。不过这也太麻烦啦，要是能在最外层和最里层之间开一个穿越空间的虫洞就好了。使用看起来很高大上的使用起来却异常简单。就像中的全局变量，只有真正全局的东西才适合放在中。

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

背景

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

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

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

使用

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

基本使用

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

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

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


// Component D
class D extends React.Component {
  render() {
    return {this.context.user.name}
  }
}
// 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 (
    {this.context.user.name}
  );
}
D.contextTypes = {
  user: React.PropTypes.object.isRequired
}

使用场景

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

比如：

当前用户信息

flux、redux的store

session级别信息（语言，主题等）

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

私有云服务器托管虫洞 Context 获取context stacking-context

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/78953.html

解密传统组件间通信与React组件间通信

摘要：同时吸取了社区大量优秀思想，进行归纳比对。有兴趣的读者可以点击下面的链接购买，再次感谢各位的支持与鼓励恳请各位批评指正京东当当原文网址在React中最小的逻辑单元是组件，组件之间如果有耦合关系就会进行通信，本文将会介绍React中的组件通信的不同方式通过归纳范，可以将任意组件间的通信归类为四种类型的组件间通信，分别是父子组件，爷孙组件，兄弟组件和任意组件，需要注意的是前三个也可以算...

CoderBear 2019-08-23 12:01 评论0 收藏0
react开发教程（八）React组件通信

摘要：父子组件通讯通讯手段这是最常见的通信方式，父组件只需要将子组件需要的传给子组件，子组件直接通过来使用。父子组件通讯通讯手段这是最常见的通信方式，父组件只需要将子组件需要的props传给子组件，子组件直接通过this.props来使用。通讯内容更多要提的是如何合理的设置子组件的props，要想将子组件设计成一个复用性强的通用组件，需要将能够复用的部分抽象出来，抽象出来的props有两...

kamushin233 2019-08-21 11:51 评论0 收藏0
WebGL three.js学习笔记使用粒子系统模拟时空隧道（虫洞）

摘要：学习笔记使用粒子系统模拟时空隧道本例的运行结果如图时空隧道演示地址的粒子系统的粒子系统主要是依靠精灵体来创建的，要实现中的粒子系统创建，一般有两种方式。 WebGL three.js学习笔记使用粒子系统模拟时空隧道本例的运行结果如图：showImg(https://img-blog.csdnimg.cn/20190426222855492.png?x-oss-process=ima...

Guakin_Huang 2019-08-23 17:10 评论0 收藏0