如何利用 React Hooks 管理全局状态
web前端开发
共 3302字,需浏览 7分钟
· 2021-01-19
来源 | https://www.cnblogs.com/xhyccc/p/14242492.html
什么是 Service
Service 包含 n 个方法; Service 包含有状态; Service 应该是个单例。 这些方法与状态应该是高度整合的,一个 Service 解决的是一个模块的问题。
class TodoRecordService {
private todoList: Record[] = [];
get getTodoList() {
return this.todoList;
}
public addRecord(newRecord: Record) {
this.todoList.push(newRecord);
}
public deleteRecord(id: string) {
this.todoList = this.todoList.filter((record) => record.id !== id);
}
public getRecord(id: string) {
const targetIndex = this.todoList.findIndex((record) => record.id === id);
return { index: targetIndex, ele: this.todoList[targetIndex] };
}
}
自定义 Service
那我们用 React 如何实现一个状态共享的单例呢?
使用 Context 与 useContext 即可。
接下来我们做一个最简单的计数器吧:一个负责计数的 button,一个负责显示当前数值的 panel。
const App: React.FC = () => {
return (
<div>
<Button />
<Panel />
div>
);
};
然后我们来定义我们的 Service:
interface State {
count: number;
handleAdd: () => void;
}
export const CountService = createContext
(null);
我们选择让一个 Context 成为一个 Service,这是因为我们可以利用 Context 的特性来进行状态共享,达到单例的效果。
但是光这样还不行,我们想让 count 拥有响应性,就必须使用 useState(或者其他 hook)来创建。
因此需要一个自定义 Hook,并且在 Context.Provider 中传入 Provider 的 value 值:
interface State {
count: number;
handleAdd: () => void;
}
export const CountService = createContext
(null);
export const useRootCountService = () => {
const [count, setCount] = useState<number>(0);
const handleAdd = useCallback(() => {
setCount((n) => n + 1);
}, []);
return {
count,
handleAdd,
};
};
那么在组建中,我们如何使用 Service 呢?
非常简单:
const App: React.FC = () => {
const countService = useContext(CountService);
return <div>{countService.count}div>;
};
所以计数器的完整代码应该这么写:
import { CountService, useRootCountService } from './service/count.service';
const App: React.FC = () => {
return (
);
};
// Button.tsx
import { CountService } from '../services/global.service';
const Button: React.FC = () => {
// 注意,此处是故意写复杂了,是为了凸显跨组件状态管理的特性
const countService = useContext(CountService);
return ;
};
// Panel.tsx
import { CountService } from '../services/global.service';
const Panel: React.FC = () => {
const countService = useContext(CountService);
return
{countService.count}
;};
hooks 与 Service
对于小组件而言,刚刚的写法已经足够了。
但是要知道,Service 是高度集中的某个模块的状态与方法,我们不能保证 Service 的方法可以直接用到组件的逻辑中去。
所以需要我们在组件内部对于逻辑进行二次拼装。
但是把逻辑直接写到组件里面是一件非常恶劣的事情!!!
幸好,React 有了 hooks 让我们去抽离逻辑代码。
const useLogic1 = () => {
// 在 hook 中获取服务
const xxxService = useContext(XxxService);
// ...
const foo = useCallback(() => {
// ...
xxxService.xxxx();
// ...
}, []);
return {
// ...
foo,
};
};
const SomeComponent: React.FC = () => {
// 复用逻辑
const { a, b, foo } = useLogic1(someParams);
const { c, bar } = useLogic2();
return (
<div>
<button onClick={() => bar()}>Some Operationbutton>
div>
);
};
这种形式的组件,便是我们的目标。
评论
偷偷告诉你如何一台电脑开多个微信!
大家好,我是轩辕。前几天在粉丝群里,有人问我是怎么在一台电脑上同时登录两个微信的?正好之前写过一篇文章,分析过原理,分享给没看过的小伙伴学习一下。手机端多开微信估计很多人都知道,像华为、小米等手机系统都对此做了支持,不过在运行Windows系统的电脑上怎么启动两个微信呢?其实很简单,你只需要写一个批
编程技术宇宙
0
测试新人,如何快速上手一个陌生的系统!
大家好,我是狂师!作为刚入行不久的测试新人,面对一个陌生的系统时,可能会感到有些手足无措。面对一个全新的系统系统,如何快速上手并展开有效的测试工作是一个重要的挑战。本文将探讨测试新人如何通过一系列步骤和策略,快速熟悉并掌握新系统的测试要点,从而提高测试效率和质量。本文旨在为测试新手提供一份指导,帮助
测试开发技术
0
如何计算数据中心的冷却需求?
今日分享 【导读】数据中心的冷却要求受多种因素影响,包括设备的热量输出、占地面积、设施设计和电气系统功率额定值等等……众所周知,环境因素会严重影响数据中心设备。过多的热量积聚会损坏服务器,可能导致其自动关闭。经常在高于可接受的温度下运行服务器会缩短其使用
数据中心运维管理
0
知乎热议:博士生最好的状态是什么?
链接:https://www.zhihu.com/question/447412618编辑:深度学习与计算机视觉声明:仅做学术分享,侵删作者:JackieLeehttps://www.zhihu.com/question/447412618/answer/2963078772最好状态比较难说,最开心
机器学习初学者
0
大厂都在用的 Git 代码管理规范 !
👉 欢迎加入小哈的星球 ,你将获得: 专属的项目实战 / Java 学习路线 / 一对一提问 / 学习打卡 / 赠书福利全栈前后端分离博客项目 2.0 版本完结啦, 演示链接:http://116.62.199.48/ ,新项目正在酝酿中
小哈学Java
2
只写后台管理的前端要怎么提升自己
大厂技术 高级前端 Node进阶点击上方 程序员成长指北,关注公众号回复1,加入高级Node交流群本人写了五年的后台管理。每次面试前就会头疼,因为写的页面除了表单就是表格。抱怨过苦恼过也后悔过(虽然我现在已经心安理得的摆烂),但是站在现在的时间点
程序员成长指北
1
【性能监控】如何有效监测网页静态资源大小?
前言作为前端人员肯定经常遇到这样的场景:需求刚上线,产品拿着手机来找你,为什么页面打开这么慢呀,心想自己开发的时候也有注意性能问题呀,不可能会这么夸张。那没办法只能排查下是哪一块影响了页面的整体性能,打开浏览器控制台一看,页面上的这些配图每张都非常大,心想这些配图都这么大,页面怎么快,那么我们有没有
高级前端进阶
0
机房水冷空调管路应该如何安装布局?
近年来随着云计算技术的快速发展,全球数据中心开始向着巨型化的方向发展,单机柜功率密度不断提高,5KW、7KW、10KW甚至几十KW功率机柜已逐步成为常规配置。新一代数据中心更显著的表现为:规模更大、密度更高、制冷要求更高、局部过热成为常态等特点。本文就来探讨下水
数据中心运维管理
0