美文网首页
React 中的Context

React 中的Context

作者: 冰_心 | 来源:发表于2016-08-25 22:55 被阅读843次

当我们想在组件树内传递props,并且不想让props流经树的每一层,context会让我们做到这一点。
context会让我们的代码变得难懂,耦合度增强,复用性降低,同时也让组件间的数据流动变得不够清晰。context就像我们全局中使用的全局变量一样。
var Button = React.createClass({
contextTypes: {
color: React.PropTypes.string
},
render: function() {
return (
<button style={{background: this.context.color}}>
{this.props.children}
</button>
);
}
});

var Message = React.createClass({
render: function() {
return (
<div>
{this.props.text} <Button>Delete</Button>
</div>
);
}
});

var MessageList = React.createClass({
childContextTypes: {
color: React.PropTypes.string
},
getChildContext: function() {
return {color: "purple"};
},
render: function() {
var children = this.props.messages.map(function(message) {
return <Message text={message.text} />;
});
return <div>{children}</div>;
}
});
在这个例子中,通过向MessageList(context provider)增加了childContextTypes和getChildContext,React能够自动的把数据向所有设置了contextTypes的子树传递,如果contextTypes在子组件中没有定义,那this.context将会是一个空对象,若contextTypes在组件中已经定义好了,那在组件接下来的声明周期中将多增加一个参数context对象。
当一个无状态函数型的组件中定义好了一个property并且设置好了contextTypes,那该函数也能够成功引用context对象
function Button(props, context) {
return (
<button style={{background: context.color}}>
{props.children}
</button>
);
}
Button.contextTypes = {color: React.PropTypes.string};
如何更新context呢?答案是:把context和组件的state关联起来,当组建的state或者props改变的时候,getChildContext函数会自动调用,更新context和其他改变一起传递到子树。
var MediaQuery = React.createClass({
getInitialState: function(){
return {type:'desktop'};
},
childContextTypes: {
type: React.PropTypes.string
},
getChildContext: function() {
return {type: this.state.type};
},
componentDidMount: function(){
var checkMediaQuery = function(){
var type = window.matchMedia("(min-width: 1025px)").matches ? 'desktop' : 'mobile';
if (type !== this.state.type){
this.setState({type:type});
}
};

window.addEventListener('resize', checkMediaQuery);
checkMediaQuery();

},
render: function(){
return this.props.children;
}
});
大多数情况下,为了代码的清晰可观,我们应该尽量避免使用context。context的最佳应用场景是用户登录,应用语言或者应用主题这一类场景

相关文章

  • React中不常用的功能——Context

    React中不常用的功能——Context Context React源码版本16.8 基本用法 跨层级通信 Co...

  • React-深入探究Context(1)

    前言 React组件中的Context与Android中的Context类似,都可以理解为上下文。而React中的...

  • 2018-08-08

    React 高级指南 React 新版上下文(context) context ?答:上下文(Context) 提...

  • react中的context

    在React中,数据可以以流的形式自上而下的传递,每当你使用一个组件的时候,你可以看到组件的props属性会自上而...

  • react 中的context

    context 表示上下文,将好像组件里面的全局变量一样,一般我们不使用这个属性,因为这个有可能损坏组件。指定 c...

  • React 中的Context

    当我们想在组件树内传递props,并且不想让props流经树的每一层,context会让我们做到这一点。conte...

  • React中 的 Context

  • 关于react中的context

    一、context有什么用 当我们使用props进行组件中的数据传递时,假如祖先级组件的数据要传递至孙子级,这种情...

  • React中的Context理解

    今天看了下react官网的context,记录下学习过程和自己对context的理解。下面从为什么要用和怎么用两个...

  • React 中的 context(7)

    Context 作用:给整个组件树共享全局的数据 最适合的场景:杂乱无章的组件都需要同一些数据 如果单纯为了不层层...

网友评论

      本文标题:React 中的Context

      本文链接:https://www.haomeiwen.com/subject/spsasttx.html