教你如何优雅的使用React的context属性

项目代码和最新内容，请在我的github阅读,请注意该文件夹下4个可以运行的例子。欢迎您star,issue

对于React的context的基本用法可以参考我的: react的context更新而组件不更新的解决方案。

首先：我们来介绍一个高阶函数，该函数对我们的原始组件进行装饰，并提供了访问应用context中的相应声明：

Inject.contextTypes = {
    data: React.PropTypes.object,get: React.PropTypes.func,register: React.PropTypes.func
  };

其实这相当于指明了应用的store签名，之所以以HOC的方式来指明是因为这样的话，每一个组件都可以通过该方法来访问context中的内容，而不用在每一个组件中都声明contextTypes。下面是函数的签名：

//wire.js
import React from 'react';
/** * [wire description] * @param {[type]} Component 我们的组件Component的class * @param {[type]} dependencies 在context中那些属性是要被作为props传递到我们的最终的组件中的 * @param {[type]} mapper 对我们要传入到组件的属性进行进一步的处理 * @return {[type]} [description] * 该方法的调用方式如下: * wire(Title,['config'],function (config) { return { title: config.name }; }); */
export default function wire(Component,dependencies,mapper) {
  class Inject extends React.Component {
    render() {
      var resolved = dependencies.map(this.context.get.bind(this.context));
      //这是我们的context中的自己关心的那一部分内容
      var props = mapper(...resolved);
       //将我们自己关心的那一部分数据放入到我们的mapper函数中继续处理成为我们Component最终的props
      return React.createElement(Component,props);
    }
  }
  //这是我们的dependencies的内部签名，但是是通过高阶组件的方式来定义的，所以通过wire方法处理的组件都是可以获取
  //到我们最外层的App组件中在context中声明的对象的
  Inject.contextTypes = {
    data: React.PropTypes.object,register: React.PropTypes.func
  };
  return Inject;
};

到了这里我们先来看一下我们的context中的数据结构：

//dependencies.js
export default {
  data: {},get(key) {
    return this.data[key];
  },register(key,value) {
    this.data[key] = value;
  }
};

也就是说我们所有的context中的数据是一个对象，但是该对象有get方法和register方法来向context中注册数据。

接下来我们看看组件中如何使用上面这个函数：

export default {
  name: 'React in patterns'
};

上面是我们应用的配置信息。

//App.js
import React from 'react';
import ReactDOM from 'react-dom';
import Header from './Header.jsx';
//Header对象
import CONfig from './config';
import dependencies from './dependencies';
//这样我们的context中已经注册了config对象了
dependencies.register('config',CONfig);
//CONfig对象是如下签名：
//{
// name: 'React in patterns'
// };
class App extends React.Component {
  getChildContext() {
    return dependencies;
  }
  render() {
    return <Header />;
  }
};
//这是我们放入到context中的dependencies对象
App.childContextTypes = {
  data: React.PropTypes.object,register: React.PropTypes.func
};
ReactDOM.render(<App />,document.querySelector('#container'));

也就是说，我们在最上层的组件的context中注册了我们应用所需要的配置信息，然后逐层向下传递。我们看看Header.js的内容

import React from 'react';
import Title from './Title.jsx';
//Header组件里面继续使用Title组件
export default function Header() {
  return (
    <header> <Title /> </header> ); }

我们继续来看看Title.js的内容：

import React from 'react';
import wire from './wire';
function Title(props) {
  return <h1>{ props.title }</h1>;
}
//Title组件必须指定Title.proTypes
Title.propTypes = {
  title: React.PropTypes.string
};
//这是我们最深层次的组件实例
export default wire(Title,['config'],function (config) {
  return { title: config.name };
});

到了这里，你应该更多的关注于wire方法。在wire方法里面，我们通过HOC的方式来实现了contextTypes。因此，经过包装的Title组件是可以获取到context中的所有信息的。其首先获取到config 属性，该属性在App组件中通过register方法进行了注册，获取到config以后我们会将config对象传入到mapper中，从而返回了我们Component需要的props属性，即 {title: config.name}。这样的话，我们的Componet就可以根据这些props属性进行UI渲染了。

这样做的好处：

(1)高阶组件中声明了contextTypes，只要经过wire方法包装的组件都是可以获取到context中的值的。这样可以避免contextTypes需要在每一个组件中都声明一次

(2)使用了context，当组件树嵌套过深的情况下可以防止中间层组件需要处理那些它不需要关心的属性。

教你如何优雅的使用React的context属性

相关文章