react如何使用context
使用 React Context 的基本步骤
创建 Context 对象：
const MyContext = React.createContext(defaultValue);提供 Context 值：
<MyContext.Provider value={/* 某个值 */}>
{/* 子组件 */}
</MyContext.Provider>在子组件中消费 Context：
// 类组件
static contextType = MyContext;
// 或在函数组件/类组件中使用 Consumer
<MyContext.Consumer>
{value => /* 基于 context 值进行渲染 */}
</MyContext.Consumer>函数组件中使用 useContext
对于函数组件，可以使用 useContext Hook 简化消费：
const value = useContext(MyContext);动态 Context 更新
Provider 的 value 变化时，所有消费该 Context 的组件都会重新渲染。确保 value 对象引用变化能触发更新：
const [value, setValue] = useState(initialValue);
<MyContext.Provider value={{ value, setValue }}>
{/* 子组件 */}
</MyContext.Provider>多 Context 使用
一个应用可以使用多个 Context，嵌套 Provider 即可：
<ThemeContext.Provider value={theme}>
<UserContext.Provider value={user}>
{/* 子组件 */}
</UserContext.Provider>
</ThemeContext.Provider>性能优化
避免 Context 值频繁变化导致不必要的渲染：
- 将不常变化的数据分离到单独 Context
- 使用 memo 或 useMemo 优化子组件
类型安全（TypeScript）
为 Context 提供类型定义：
interface MyContextType {
value: string;
setValue: (v: string) => void;
}
const MyContext = React.createContext<MyContextType>({
value: '',
setValue: () => {}
});
