文章目录
前言
一、Context产生背景
-
在开发中，比较常见的数据传递方式中，是通过props属性自上而下（由父到子）进行传递
-
比如一些数据需要在多个组件中进行共享（地区偏好、UI主题、用户登录状态、用户信息等）
-
如果我们在顶层App中定义的信息中，之后一层层的传递下去，那么对于中间层不需要的数据组件来说，这是一种冗余的操作
二、Context的出现
相对于一层层数据的传递，React提供了相对应的API：Context
- Context 提供了一种在组件之间共享此类值的方式，而不必显示的通过组件树逐层传递Props
- Context 设计目的是为了共享那些对于一个组件树而言是 “ 全局”的数据，例如当前认证的用户、主题或首选语言
1. React.createContext
- 创建一个需要共享的Context对象
- 如果一个组件订阅了Context，那么这个组件会从离自身最近的那个匹配的Provider中读取到当前的Context值
- 如果组件在顶层查找过程中没有找到对应的Provider，那么就使用默认值（defaultValue）
const MyContext = React.createContext(defaultValue)
2. Context.Provider
- 相对应的Context对象都会返回一个 Provider React组件，它允许消费组件订阅 context 的变化
- Provider 接收一个 value 属性，传递给消费组件
- 一个Provider 可以和多个消费组件有对应关系
- 当多个Provider 也可以嵌套使用，里层的会覆盖外层的数据
- 当Provider 的 value 值发生变化时，它内部所有的消费组件都会重新进行渲染
<MyContext.Provider value={{age:18}} >
2. Class.contextType
- 挂载在class上的contextType 属性会被重新赋值为一个由 React.createContext() 创建的Context对象
- 这能让你使用 this.context 来消费最近 Context 上的那个值
- 你可以在任何生命周期中访问到它，包括 render 函数
MyClass.contextType = MyContext
3. Consumer
- 当时用的value为一个函数式组件时
- 当组件中需要多个Context时
总结
以上就是今天要讲的内容，本文仅仅简单介绍了Context的使用