context的作用
context 通过组件数提供了一个传递数据的方法，从而避免了在每一个层级手动的传递 props 属性。
在一个典型的 React 应用中，数据是通过 props 属性由上向下（由父及子）的进行传递的，但这对于某些类型的属性而言是极其繁琐的（例如：地区偏好，UI主题），这是应用程序中许多组件都所需要的。 Context 提供了一种在组件之间共享此类值的方式，而不必通过组件树的每个层级显式地传递 props 。
在react中实现context的使用
//使用context中值的组件
import React from 'react';
import PropTypes from 'prop-types';
class Button extends React.Component {
render() {
return (
// context中的值具体的使用
<button style={{background: this.context.color}}>
{this.props.children}
</button>
);
}
}
Button.contextTypes = {
color: PropTypes.string
};
// 中间的组件
import React from 'react';
class Message extends React.Component {
render() {
return (
<div>
{this.props.text} <Button>Delete</Button>
</div>
);
}
}
// 顶级组件，在配置context的值
import React from 'react';
import PropTypes from 'prop-types';
class MessageList extends React.Component {
getChildContext() {
// 设置context中color的具体值
return {color: "purple"};
}
render() {
const children = this.props.messages.map((message) =>
<Message text={message.text} />
);
return <div>{children}</div>;
}
}
MessageList.childContextTypes = {
// 指定context中存在color，对应的值为字符串类型
color: PropTypes.string
};
