context是干什么的?为什么会存在这么一个东西?
context字面意思是上下文,在react中存在是为了解决深层次组件传值困难的问题
这里涉及到组件的传值问题,大体商说分三总:兄弟间传值(通过父组件),父往子传值(通过props),子往父传(props函数回调),这是基础的传值问题,但是如果组件嵌套的太深,那么传值就变的非常麻烦,为了解决这样的问题才产生了context
这是context的官方介绍,跳转点这里
context使用的生产者和消费者模式,翻译过来就是由父节点提供属性值,子节点可以直接调用
安利一个demo:https://github.com/consterwinter/React-Context
实现的就是如下图的样式,点击按钮age加一
组件代码:
创建context对象
const MyContext = React.createContext();
定义生产者组件,因为生产者可能是需要初始一些数据的,所以在生产者中可以定义提供的数据,函数等
class MyProvider extends Component {
state = {
name: 'Wes',
age: 100,
cool: true
}
render() {
return (
<MyContext.Provider value={{
state: this.state,
growAYearOlder: () => this.setState({
age: this.state.age + 1
})
}}>
{this.props.children}
</MyContext.Provider>
)
}
}
上面代码在provider中定义state,还有设置state中age的函数等
下面定义的是消费者:
class Person extends Component {
render() {
return (
<div className="person">
<MyContext.Consumer>
{(context) => (
<React.Fragment>
<p>Age: {context.state.age}</p>
<p>Name: {context.state.name}</p>
<button onClick={context.growAYearOlder}>click me</button>
</React.Fragment>
)}
</MyContext.Consumer>
</div>
)
}
}
作为消费者组件,它调用了context的数据和函数
下面的是嵌套结构
class App extends Component {
render() {
return (
<MyProvider>
<div>
<p>I am the app</p>
<Family />
</div>
</MyProvider>
);
}
}
export default App;
默认export名字为 app类, 因为是要多层调用,这里使用了一个中间的嵌套层Family
const Family = (props) => (
<div className="family">
<Person />
</div>
)
只是一个简单的例子,体会下图和使用context