react中使用context跨组件传递数据

为什么使用context

当需要跨组件传递数据时，如果采用普通的写法，可能需要定义许多额外的数据，然后通过props进行层层传递，而改用context就不需要这么麻烦了；

context的原理是

在顶层的组件定义一些 ‘全局变量’ ，然后在其内部的后代组件中，都可以通过一些配置访问到这些全局变量。

实现一个context

1、在顶层组件中进行定义

class ListContainer extends React.Component {

       static childContextTypes = {
           title: PropTypes.string
       };

       getChildContext() {
           return {
               title: 'title'
           }
       }

       render() {
           return (
                   <div className="list-container">
                       <List></List>
                   </div>
           )
       }
   }

需要定义childContextTypes和getChildContext方法

childContextTypes可以理解为判断全局变量的类型；
getChildContext定义全局变量的值

2、在后台组件中进行配置

 class List extends React.Component {
       constructor(props) {
           super(props);
       }

       render() {
           return (
               <FormItem></FormItem>
           )
       }
   }

   class FormItem extends React.Component {
       static contextTypes={
           title:PropTypes.string
       };
       render() {
           console.log(this.context)
           return (
               <div>{this.context.title}</div>
           )
       }
   }

在后台组件中配置contextTypes进行类型检测
其中contextTypes的每一项都必须配置一个函数（经常使用来自PropTypes的内容），如果配置异常，会报错

配置成功之后，就可以正常使用了。

使用范围

context的使用范围是用于定义一些在整体组件树中，都可以被视为全局的变量，例如，全局的主题色调，用户的登录信息等等。

而一般的跨组件信息传递，不建议使用context。

使用context意味着创造了一些自该组件起，影响范围为该组件全部后代组件的全局变量，而如果我们在其后代组件的内又一次地使用了context，组件之间将变得非常混乱，我们将无法得知数据到底来自哪个context，并且依赖关系也将变得非常复杂。