React context

18

介绍

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。通过withContextgetChildContext 指定的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 逐层传递属性的方式。这样可以减少组件之间的直接依赖关系。

你可能感兴趣的

frontoldman · 2017年01月17日

very nice

+1 回复

webioix · 2016年01月24日

React.widthContext => 改成 React.withContext

回复

0

good

frontoldman · 2017年01月17日
nant · 2016年11月17日

很清晰,受教了

回复

blackcater · 2016年12月07日

好文章

回复

lml1993426 · 2017年10月12日

我用了一样的代码,但是显示React.withContext is not a function。。。。。。

回复

载入中...