引见

Contexts 是React的一个主要属性，然则到目前为止，这个属性在正式的文档内里还没有对它举行正式引见，在 reactv0.1.4将会正式宣布这个属性。下面先来引见一下它的运用体式格局。

React.withContext

React.withContext 会实行一个指定的上下文信息的回调函数,任何在这个回调函数内里衬着的组件都有这个context的接见权限。

var A = React.createClass({

    contextTypes: {
        name: React.PropTypes.string.isRequired,
    },

    render: function() {
        return <div>My name is: {this.context.name}</div>;
    }
});

React.withContext({'name': 'Jonas'}, function () {
    // Outputs: "My name is: Jonas"
    React.render(<A />, document.body);
});

任何想接见context内里的属性的组件都必须显式的指定一个contextTypes 的属性。假如没有指定改属性，那末组件经由过程 this.context 接见属性将会失足。

假如你为一个组件指定了context，那末这个组件的子组件只需定义了contextTypes 属性，就能够接见到父组件指定的context了。

var A = React.createClass({

    render: function() {
         return <B />;
    }
});

var B = React.createClass({

    contextTypes: {
        name: React.PropTypes.string
    },

    render: function() {
        return <div>My name is: {this.context.name}</div>;
    }
});

React.withContext({'name': 'Jonas'}, function () {
   React.render(<A />, document.body);
});

为了削减文件的援用，你可认为contextTypes 放到一个minx 中，如许 用到的组件援用这个 minx 就好了。

var ContextMixin = {
    contextTypes: {
        name: React.PropTypes.string.isRequired
    },

    getName: function() {
        return this.context.name;
    }
};

var A = React.createClass({

    mixins: [ContextMixin],

    render: function() {
         return <div>My name is {this.getName()}</div>;
    }
});

React.withContext({'name': 'Jonas'}, function () {
    // Outputs: "My name is: Jonas"
    React.render(<A />, document.body);
});

getChildContext

和接见context 的属性是须要经由过程 contextTypes 指定可接见的 元素一样。getChildContext 指定的通报给子组件的属性须要先经由过程 childContextTypes 来指定，不然会发生毛病。

// This code *does NOT work* becasue of a missing property from childContextTypes
var A = React.createClass({

    childContextTypes: {
         // fruit is not specified, and so it will not be sent to the children of A
         name: React.PropTypes.string.isRequired
    },

    getChildContext: function() {
         return {
             name: "Jonas",
             fruit: "Banana"
         };
    },

    render: function() {
         return <B />;
    }
});

var B = React.createClass({

    contextTypes: {
        fruit: React.PropTypes.string.isRequired
    },

    render: function() {
        return <div>My favorite fruit is: {this.context.fruit}</div>;
    }
});


// Errors: Invariant Violation: A.getChildContext(): key "fruit" is not defined in childContextTypes.
React.render(<A />, document.body);

假定你的应用程序有多层的context。经由过程withContext 和 getChildContext 指定的context元素都能够被子组件援用。然则子组件是须要经由过程 contextTypes 来指定所须要的context 元素的。

var A = React.createClass({

    childContextTypes: {
         fruit: React.PropTypes.string.isRequired
    },

    getChildContext: function() {
         return { fruit: "Banana" };
    },

    render: function() {
         return <B />;
    }
});

var B = React.createClass({

    contextTypes: {
        name: React.PropTypes.string.isRequired,
        fruit: React.PropTypes.string.isRequired
    },

    render: function() {
        return <div>My name is: {this.context.name} and my favorite fruit is: {this.context.fruit}</div>;
    }
});

React.withContext({'name': 'Jonas'}, function () {
    // Outputs: "My name is: Jonas and my favorite fruit is: Banana"
    React.render(<A />, document.body);
});

context 是就近援用的，假如你经由过程withContext 指定了context元素，然后又经由过程 getChildContext 指定了该元素，该元素的值将会被掩盖。

var A = React.createClass({

    childContextTypes: {
         name: React.PropTypes.string.isRequired
    },

    getChildContext: function() {
         return { name: "Sally" };
    },

    render: function() {
         return <B />;
    }
});

var B = React.createClass({

    contextTypes: {
        name: React.PropTypes.string.isRequired
    },

    render: function() {
        return <div>My name is: {this.context.name}</div>;
    }
});

React.withContext({'name': 'Jonas'}, function () {
    // Outputs: "My name is: Sally"
    React.render(<A />, document.body);
});

总结

经由过程context通报属性的体式格局能够大批削减 经由过程显式的经由过程 props 逐层通报属性的体式格局。如许能够削减组件之间的直接依靠关联。