一、Context
官方文档：https://react.dev/learn/passing-data-deeply-with-context
二、分离逻辑和视图
在 React 中使用两层组件来使用 Context 的原因主要是为了分离逻辑和视图，并且更好地管理和优化状态。
这种模式通常被称为“Context Provider/Consumer”模式。
以下是一些具体原因：
解耦状态逻辑和视图逻辑：
- Context Provider 组件通常负责管理和提供状态。它包含与状态管理相关的逻辑，例如获取数据、处理状态变化等。
- Consumer 组件 负责渲染与状态相关的视图。它通过 Context 访问 Provider 提供的状态，从而保持视图逻辑的简洁和易维护。
提高组件的可复用性：
- 使用 Provider 和 Consumer 分离逻辑和视图后，可以更容易地在不同的视图组件中复用相同的状态逻辑，而无需重复编写相同的代码。
优化性能：
- Context 的更新会触发使用了这个 Context 的所有组件重新渲染。通过分层结构，可以在 Provider 中集中处理状态更新，减少不必要的重新渲染，提高性能。
- Consumer 组件可以根据需要细粒度地订阅 Context 的某些部分，避免不必要的渲染。
简化测试：
- 逻辑和视图的分离使得单元测试更加简单。Provider 组件可以独立测试其状态管理逻辑，而 Consumer 组件可以通过模拟的 Context 值来测试其渲染逻辑。
增强代码的可维护性和可读性：
- 使用两层组件可以使代码结构更加清晰，职责分离明确。状态管理和 UI 逻辑分别处理，使得代码更容易理解和维护。
一个典型的使用示例如下：
// 创建 Context
const MyContext = React.createContext();
// Provider 组件
const MyProvider = ({ children }) => {
const [state, setState] = useState(initialState);
const value = {
state,
updateState: (newState) => setState(newState),
};
return (
<MyContext.Provider value={value}>
{children}
</MyContext.Provider>
);
};
// Consumer 组件
const MyConsumer = () => {
const { state, updateState } = useContext(MyContext);
return (
<div>
<p>Current state: {state}</p>
<button onClick={() => updateState("new state")}>Update State</button>
</div>
);
};
// 使用 Provider 包裹应用
const App = () => (
<MyProvider>
<MyConsumer />
</MyProvider>
);
export default App;
通过这种方式，Provider 组件管理状态逻辑，Consumer 组件专注于渲染逻辑，从而实现了状态逻辑和视图逻辑的分离。
三、优化性能
- Context 的更新会触发使用了这个 Context 的所有组件重新渲染。通过分层结构，可以在 Provider 中集中处理状态更新，减少不必要的重新渲染，提高性能。
- Consumer 组件可以根据需要细粒度地订阅 Context 的某些部分，避免不必要的渲染。
这段话解释了 Context 的工作机制以及如何优化组件的渲染行为。具体来说，当 Context 的值发生变化时，所有使用 useContext 获取该 Context 的组件都会重新渲染，即使这些组件使用了 React.memo 或 shouldComponentUpdate 来优化性能。这是因为 Context 的变化会绕过这些优化机制。
为了避免这种情况，可以将组件分为两个部分：一个外层组件从 Context 中读取所需的内容，并将这些内容作为 props 传递给使用 React.memo 优化的子组件。这样，只有当与子组件相关的 Context 值发生变化时，子组件才会重新渲染。
下面是一个示例代码和解释：
示例代码
import React, { useContext, useState, createContext, memo } from 'react';
// 创建 Context
const MyContext = createContext();
const MyProvider = ({ children }) => {
const [state, setState] = useState({ count: 0, name: 'John' });
return (
<MyContext.Provider value={{ state, setState }}>
{children}
</MyContext.Provider>
);
};
// 外层组件，从 Context 中读取所需内容
const OuterComponent = () => {
const { state } = useContext(MyContext);
// 只提取与子组件相关的值
const name = state.name;
return <InnerComponent name={name} />;
};
// 子组件，使用 memo 优化
const InnerComponent = memo(({ name }) => {
console.log('InnerComponent render');
return <div>Name: {name}</div>;
});
const App = () => (
<MyProvider>
<OuterComponent />
<button onClick={() => setState((prev) => ({ ...prev, count: prev.count + 1 }))}>
Increment Count
</button>
</MyProvider>
);
export default App;
解释
创建 Context：我们创建了一个 Context
MyContext，并使用MyProvider组件来提供 Context 的值。MyProvider 组件：
MyProvider组件管理状态state，包含count和name，并将其提供给 Context。OuterComponent 组件：
OuterComponent组件使用useContext钩子从 Context 中读取状态state。然后，它提取出与子组件相关的name值，并将其作为 props 传递给InnerComponent。InnerComponent 组件：
InnerComponent组件使用React.memo进行优化。由于它只接收name作为 props，因此只有在name发生变化时，它才会重新渲染。避免不必要的重新渲染：通过将
OuterComponent作为中间层，从 Context 中读取值并将其传递给子组件，可以避免InnerComponent在count值变化时重新渲染，因为InnerComponent对count的变化不感兴趣。
这样，通过将组件分为两个部分，确保只有与子组件相关的 Context 值变化时才会触发子组件的重新渲染，从而优化性能。
