React的Context

👨 作者简介：大家好，我是Taro，前端领域创作者
✒️ 个人主页：唐璜Taro
🚀 支持我：点赞👍+📝 评论 + ⭐️收藏

---

---

前言

一、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的使用