本文主要是介绍React的context学习总结，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
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
参考：https://www.jianshu.com/p/eba2b76b290b
这篇关于React的context学习总结的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
