react 之Context理解

通常情况下，在react组件中，我们可以通过props很清楚的知道哪些数据被传递，但是在一些特定的场景下，我们不想要手动的向下每一层传递我们需要的props，这就需要用到强大的context API了。

首先是一个不使用context的例子：

这里使用了this.props.children，所有嵌套在组件中的 JSX 结构都可以在组件内部通过 props.children 获取到：

import React from 'react';

export  class Button extends React.Component {
    render() {
        return (
           <button style={{background: this.props.color}}>
                {this.props.children}
           </button>
        );
    }
}



export  class Message extends React.Component {
    render() {
        return (
            <div>
                <Button color={this.props.color}>Delete</Button>
            </div>
        );
    }
}


export class MessageList extends React.Component {
    render() {
        const color = "purple";
        return (
            <Message  color={color} />
        )
    }
}

然后修改为使用context：

import React from 'react';
import PropTypes from 'prop-types';

export  class Button extends React.Component {
    render() {
        return (
            <button style={{ background: this.context.color }}>
                {this.props.children}
            </button>
        );
    }
}
Button.contextTypes = {
    color: PropTypes.string
};


export  class Message extends React.Component {
    render() {
        return (
            <div>
                <Button >Delete</Button>
            </div>
        );
    }
}


export class MessageList extends React.Component {
    getChildContext() {
        return { color: "purple" };
    }
    render() {
        return (
            <Message />
        )
    }
}
MessageList.childContextTypes = {
    color: PropTypes.string
};


通过在MessageList（context提供者）中添加childContextTypes和getChildContext，React会向下自动传递参数，任何组件只要在它的子组件中（这个例子中是Button），就能通过定义contextTypes来获取参数。

如果contextTypes没有定义，那么context将会是个空对象。