useContext 简单使用
2023-07-02 本文已影响0人
云高风轻
1. 前言
- react中
hook也挺多的,有些简单有些复杂,这里说个useContext
2. 是什么 what
- React 提供的一个钩子函数，用于在函数式组件中访问上下文（Context）的值。
- 上下文（Context）是 React 中一种跨组件层级共享数据的机制，它能够在组件树中传递数据，而不必通过显式的 props 传递。useContext 的作用就是在函数式组件中访问这些共享的上下文数据。
-
useContext提供了一种简洁的方式在函数式组件中访问上下文数据，适用于需要在组件之间共享数据的场景。
3. 应用场景
- 主题切换：通过上下文传递当前的主题样式，不同组件可以根据主题样式进行样式的切换。
- 用户认证：通过上下文传递用户认证状态，不同组件可以根据用户的认证状态来展示不同的内容。
- 国际化：通过上下文传递当前的语言环境，不同组件可以根据语言环境展示对应的翻译文本。
- 全局数据共享：通过上下文传递全局的数据，例如应用的配置信息、共享的数据状态等。
4. 环境安装
- 创建context
- 设置
provider并通过value接口传递state
- 局部组件获取读写接口
import React, { createContext, useContext } from 'react';
// 创建一个上下文
const MyContext = createContext();
// 父组件
const ParentComponent = () => {
const name = 'John';
return (
<MyContext.Provider value={name}>
<ChildComponent />
</MyContext.Provider>
);
};
// 子组件
const ChildComponent = () => {
// 使用 useContext 获取上下文的值
const name = useContext(MyContext);
return <h1>Hello, {name}!</h1>;
};
// 渲染应用
const App = () => {
return <ParentComponent />;
};
export default App;
- 通过
createContext创建了一个名为MyContext的上下文对象。- 然后，在父组件
ParentComponent中，我们将需要共享的数据name通过 MyContext.Provider 提供给子组件。- 接下来，在子组件
ChildComponent中，我们使用useContext钩子来获取上下文中的值，并将其渲染到页面上。
- 为了使子组件能够访问到上下文，必须将其包裹在提供上下文值的父组件的 MyContext.Provider 组件内部。
- 在实际应用中，可以将需要共享的数据和功能
封装到一个上下文对象中，- 然后在需要访问这些数据和功能的组件中使用
useContext钩子来获取上下文的值。- 这样可以方便地在组件之间共享数据，并实现组件之间的解耦。
- redux 也用了
provider
- 也可以理解为 生产者/消费者模式
