认识

一、认识

---

在构建 React 应用程序时, 在多层嵌套组件来使用另一个嵌套组件提供的数据。最简单的方法是将一个 prop 从每个组件一层层的传递下去，从源组件传递到深层嵌套组件，这叫做prop drilling。prop drilling的主要缺点是原本不需要数据的组件变得不必要地复杂，并且难以维护。为了避免prop drilling，一种常用的方法是使用React Context。通过定义提供数据的Provider组件，并允许嵌套的组件通过Consumer组件或useContext Hook 使用上下文数据。

Context 提供了一个无需为每层组件手动添加 props，就能在组件树间进行数据传递的方法。 React Context 是 React 内置的全局数据传递机制，用于在组件树中共享数据而无需层层传递 props。

Context 基本用法是: 通过 React.createContext 创建一个 Context 对象，在需要共享数据的上层组件使用 Provider 提供 value, 然后在子组件中通过 useContext 或 Consumer 获取该数据。

Context 的问题是: 每当 Provider 的 value 发生变化时, 所有依赖该 Context 的组件都会重新渲染，容易引起性能瓶颈，即使它们只使用了部分数据或者没有引用 Context 数据, 这可能会导致不必要的重渲染和性能下降。因此, Context 的更新策略缺乏细粒度订阅容易, 这可能会导致不必要的重渲染和性能下降。

Context 最佳实践: 1. 使用 React.memo 或 useMemo 等手段来减少不必要的重渲染，从而在享受全局共享便利的同时避免性能问题; 2. 我们应当谨慎使用 Context, 将其主要用于传递诸如主题、语言、认证状态等相对静态或低频变化且特别通用的数据, 对于频繁更新的数据则建议采用局部状态或专门的状态管理库