本文介绍了React的Context API的使用，包括创建Context对象、父组件提供数据、子组件订阅数据的方式。针对不同类型的组件（Class和Function），讨论了封装Context的必要性和实现方法，以简化组件间的通信。通过封装Context，可以提高组件编写效率，减少props的传递。文章最后提到了封装后的Context组件与Redux connect方法的相似之处，并鼓励读者进一步探索Context与Redux的异同。
React Context简介
官网的介绍是：
Context 设计目的是为了共享那些对于一个组件树而言是“全局”的数据，例如当前认证的用户、主题或首选语言。
简单来说，context 就是哪里需要哪里引，无需通过props一层一层的传递。
个人觉得就是类似于redux那样的思想。
其他关于context更多的信息，可以查阅一下官方文档，这里就不详细展开了。
context用法简述
首先需要使用 React.createContext 方法，创建一个Context对象。
const MyContext = React.createContext(defaultValue);
在父组件中需要使用 Context.Provider 组件，提供 context 数据给子组件获取。
<MyContext.Provider value={
{
a : 1 }}>
</MyContext.Provider>
子组件在接收值的时候，根据组件的类型需要使用不同的方法。
class形式的组件在订阅context的时候，在class上挂载 contextType 属性之后，就可以在class组件内使用 this.context 获取订阅的数据
最低0.47元/天 解锁文章
扫一扫
285
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
