React中的“虫洞”——Context

2017-03-09

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

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

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

使用

看起来很高大上的Context使用起来却异常简单。假设我们有下面这样的组件结构。

基本用法

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

// Component App
class App extends React.Component {
  static childContextTypes = {
    user: React.PropTypes.object.isRequired
  }
  getChildContext() {
    return {
      user: this.props.user
    }
  }
  render() {
    return (
      <div >
        <Child />
      </div>
    );
  }
}


// Component Child
class Child extends React.Component {
  static contextTypes = {
    user: React.PropTypes.object.isRequired
  }
  render() {
    return <div>{this.context.user.name}</div>
  }
}

//index.js
ReactDOM.render(
<App user={{name:'Alex',age:40}} />, 
document.getElementById('root')
)

很简单吧，只要在外层定义一个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了……

原文链接