使用useContext封装一个小型全局数据存储共享工具hook

最新推荐文章于 2025-05-12 19:37:44 发布
原创 最新推荐文章于 2025-05-12 19:37:44 发布 · 1.2k 阅读 · 22 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#react.js #前端 #前端框架

如何在React中使用自定义Hook管理全局状态

在构建React应用时，我们经常需要跨多个组件共享状态。虽然Redux等状态管理库在大型应用中表现出色，但对于小到中等规模的项目来说，它们可能显得过于复杂。在这篇文章中，我将向你展示如何使用React的useState和useContext钩子创建自定义Hook来管理全局状态，同时演示如何有效地执行批量状态更新以防止状态覆盖

创建Context和Provider

首先，我们需要创建一个上下文和一个对应的提供者（Provider）来传递状态。

store 文件夹中定义index.tsx文件

import {
   
    createContext, ReactNode, useContext, useState } from "react";
import {
   
    DefinedState, initState } from "./defined.ts";

/* 定义 SetStateAction   */
type SetStateAction = {
   
   
  [P in keyof DefinedState]?: DefinedState[P];
};

// 定义 context 的类型
interface ContextType {
   
   
  state: DefinedState;
  setState: (action: SetStateAction) => void;
}

// 使用断言定义一个“空”的 context，并赋予后面会使用的类型
const ContextBody = createContext<ContextType>({
   
   } as ContextType);

export function ContentProvider({
   
    children }: {
   
    children: ReactNode }
最低0.47元/天 解锁文章

200万优质内容无限畅学
前端面试题
2301_77357017的博客
06-16 313
Immutable的思想就是构建持久化、不可变的、结构共享的状态，当对immutable数据进行操作的时候，实质上不会更改原数据，而是会根据原数据生成一个新的immutable数据，这样就可以避免刚才说的问题， 并且immutable采用的是结构共享的方式，生成新的immutable数据的时候不会完全重建，而是只重新更改后的节点及其父节点，其他节点与上次的immutable数据共享， 节省了新建的性能开支。需要自行做缓存优化。数据缓存，合适的接口数据缓存在本地存储， 减少接口调用、keep-alive；
react常见面试题(持续更新)
Mr.Wang开发日常
03-06 1366
受控组件的值是由React组件自身的state所控制的。这意味着表单元素的值不是直接由DOM维护，而是通过React组件的state来决定。每次用户输入时，都会触发一个事件处理器（如。
HooksRedux:前端用useReducer和useContext建立一个简单的Redux项目，包括主页和收藏夹页面。前端路由使用@reachrouter。学习到封装组件和页面的思想。
03-28
该项目是通过引导的。 可用脚本 在项目目录中，可以运行： yarn start 在开发模式下运行应用程序。 打开在浏览器中查看它。 如果您进行编辑，则页面将重新加载。 您还将在控制台中看到任何棉绒错误。 yarn test 在交互式监视模式下启动测试运行器。 有关更多信息，请参见关于的部分。 yarn build 构建生产到应用程序build文件夹。 它在生产模式下正确捆绑了React，并优化了构建以获得最佳性能。 最小化内部版本，文件名包含哈希值。 您的应用已准备好进行部署！ 有关更多信息，请参见关于的部分。 yarn eject 注意：这是单向操作。 eject ，您将无法返回！ 如果您对构建工具和配置选择不满意，则可以随时eject 。 此命令将从您的项目中删除单个生成依赖项。 相反，它将所有配置文件和传递依赖项（webpack，Babel，ESLint等）直接复制
封装useContext
m0_47999208的博客
09-10 140
【代码】封装useContext。
React Hook - useContext
最新发布
m0_52222401的博客
05-12 1103
useContext是React提供的一个Hook，用于简化从Context中获取共享数据的代码。它替代了传统的<XxxContext.Consumer>标签，使得在函数组件中获取共享数据更加简洁。通过useContext，开发者可以直接获取由React.createContext()创建的共享数据对象的值，而无需逐层传递属性。useContext的基本用法是传入一个Context对象，并返回该Context的当前值。它适用于需要从多个组件中访问相同数据的场景，如主题、用户信息等。使用useCo
React-hooks useReducer和useContext 封装和使用
weixin_43825389的博客
11-03 959
一、React-hooks useReducer和useContext 封装和使用 userReducer.ts 数据存储文件 /** * userReducer.ts * 数据封装：reducer */ type Actions = 'updateUserId' | 'updateToken'; export interface TAction { type: Actions; data: any; } export interface TState{ userId: string
hook之useContext
m0_59345890的博客
10-15 1543
useContext这个hook，我们通过翻译就可以大致知道它的用途，译为使用上下文。context上下文我们在前面就已经使用过了，它是一种用于跨组件之间的传值的技术。我们学过Context，再来学习useContext这个hook就会变得简单很多。
antd组件库封装38-useContext
qq_41632427的博客
01-29 176
前端
react-一个使用ReactContextAPI的轻量级状态管理受Redux的启发
08-15
描述中的"一个使用React Context API的轻量级状态管理，受Redux的启发"进一步证实了这个项目的目标是模仿Redux的核心功能，如全局状态存储、单向数据流和可观察的状态变化，但利用React原生的Context特性，以减少对...
前端犄角旮旯，非常规面试题总结（不断更新....）
qq_51398495的博客
06-24 1332
27、判断类型的方式有哪些？1、typeof操作符：用来检测数据的类型，返回的是一个表示类型的字符串。2、instanceof操作符：用来检测对象是否为指定的构造函数的实例。3、方法：可以返回对象的准确类型。4、方法：用来判断一个变量是否为数组。（一）typeof和instanceof区别typeof返回的是一个字符串，表示变量的数据类型，可能的返回值有numberstringbooleanfunctionundefinedobject。instanceof返回的是一个布尔值，true或。
useContext Hook 是如何工作的
hsany330的专栏
05-14 633
想阅读更多优质文章请猛戳GitHub博客,一年百来篇优质文章等着你！ 所有这些新的React Hook之间都有一个宗旨：就是为了使函数组件像类组件一样强大。 useContexthook 与其它几个有点不一样，但它在特定场景下还是很有用的。 React 的Context API是一种在应用程序中深入传递数据的方法，而无需手动一个一个在多个父子孙之间传递prop。当咱们需要的只是传递数据时，它可以作为像Redux这样的工具的一个很好的替代。 使用Context,首先顶层先声明Prov...
Hook改变的React Component写法思路(3) - useContext
前端乱谈
05-12 1532
首先我们回忆一下React Context API的用法（生产者消费者模式）。 创建context对象： // context初始值 const INITIAL_VALUE = ‘’; const MyContext = React.createContext(INITIAL_VALUE); 划定context使用的范围，管理它的值： function App() { return ( ...
React Hook之useContext的介绍与使用
热门推荐
吴小迪的博客
09-11 5万+
React的useContext英语场景： 如果需要在组件之间共享状态，可以使用useContext()。 现在有俩个组件Navbar和Messages，我们希望它们之间共享状态。 <div className="test"> <Navbar /> <Messages /> </div> 使用方法如下: 第一步在它们的父组件上使用React的C...
react useContext 用法
m0_65730686的博客
02-27 1083
react useContext 用法
react hooks 基于 useContext 与 useReducer 跨组件通信的封装
weixin_44968614的博客
05-08 342
react hooks 基于 useContext 与 useReducer 跨组件通信的封装， 实现数据全局修改与展示
React中常用的hook函数(三)——useReducer和useContext
Mrs_Lupin的博客
11-01 1225
React中常用的hook函数(一)——useState和useEffect_usestate useeffect-CSDN博客React中常用的hook函数(二)——useMemo和useCallback-CSDN博客。
react18【系列实用教程】Hooks （useState，useReducer，useRef，useEffect，useContext，useMemo，useCallback，自定义 Hook ）
朝阳39的博客
05-14 1010
即根据自己的业务需要编写use开头的函数，实现逻辑封装和复用。新建文件 myHooks.js，存放所有自定义的 hook将可复用的逻辑封装成use开头的函数，以对象或数组的数据格式 return 组件中需要用到的变量和函数对外导出自定义的 hook在目标组件中导入自定义的 hook通过对象/数组解构赋值（与自定义 hook 中return 的数据格式对应），使用自定义的 hook。
vue写组件应该注意的问题
qq_37978839的博客
09-30 613
vue写组件应该注意的问题高度抽离组件功能 高度抽离组件功能 我们知道，vue中的数据流是单项的，所以提升组件复用性最好的办法就是使子组件只展示数据，将功能函数写在最大的父组件中，使用props将函数或者数据进行向下传递，一层一层，当需要维护时，只需要在最大的组件中进行修改即可。 下面我们将一个vue的todolist使用组件进行写 下面上代码 <template> <div> <my-input :addNew="addNew"></my-input&
React hooks ——useContext初学
m0_64915594的博客
01-06 772
一、useContext 的作用 1.useContext可以帮助我们跨越组件层级直接传递变量，实现共享。 需要注意的是useContext和redux的作用是不同的！！！ useContext：解决的是组件之间值传递的问题 redux：是应用中统一管理状态的问题 但通过和useReducer的配合使用，可以实现类似Redux的作用。 2.Context的作用就是对它所包含的组件树提供全局共享数据的一种技术。 3.直接上代码 公共封装：通过createContext 函数创建 CountConte
使用react封装一个web serial api的useSerial自定义hook
12-20
在React中，我们可以创建一个名为`useSerial`的自定义hook来封装Web Serial API的功能。这个hook可以帮助我们更简洁地处理设备连接、数据读取和错误处理等繁琐的操作。以下是使用React Hooks（如useState和useEffect）来实现该hook的一个基本示例： ```javascript import { useState, useEffect } from 'react'; // 假设webSerialAPI是一个全局可用的对象，用于访问Web Serial API const webSerialAPI = window.WebSerialPort; // useSerial自定义hook export const useSerial = (serialPortName) => { const [serialPort, setSerialPort] = useState(null); const [data, setData] = useState(''); const [error, setError] = useState(null); // 初始化函数 const initialize = async () => { try { serialPort = await webSerialAPI.getPorts(); if (serialPortName && serialPort.find(port => port.label === serialPortName)) { const selectedPort = serialPort.find(port => port.label === serialPortName); setSerialPort(selectedPort.open({ baudRate: 9600 })); } } catch (e) { setError(e.message); } }; // 数据接收函数 const onData = event => { setData(event.data); }; // 错误处理函数 const handleErrors = err => { setError(err); }; useEffect(() => { if (serialPort) { serialPort.addEventListener('data', onData); return () => serialPort.removeEventListener('data', onData); } return null; }, [serialPort]); // 清理工作 const cleanup = () => { if (serialPort) { serialPort.close(); } }; // 开始初始化 useEffect(() => { initialize(); return cleanup; }, []); // 返回的状态和回调 return { serialPort, data, sendData: (dataToSend) => serialPort.write(dataToSend), error, }; }; // 使用示例 function MyComponent() { const { serialPort, data, error } = useSerial('your_serial_port_name'); // ...在组件里处理serialPort的数据和错误 } ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

光头程序员

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值