ahooks 整体架构篇,大家都能看得懂

大家好,我是若川。持续组织了近一年的源码共读活动,感兴趣的可以 加我微信 ruochuan12 参与,每周大家一起学习200行左右的源码,共同进步。同时极力推荐订阅我写的《学习源码整体架构系列》 包含20余篇源码文章。历史面试系列。另外:目前建有江西|湖南|湖北籍前端群,可加我微信进群。

本文是深入浅出 ahooks 源码系列文章的第一篇,这个系列的目标主要有以下几点:

  • 加深对 React hooks 的理解。

  • 学习如何抽象自定义 hooks。构建属于自己的 React hooks 工具库。

  • 培养阅读学习源码的习惯,工具库是一个对源码阅读不错的选择。

注:本系列对 ahooks 的源码解析是基于 v3.3.13。自己 folk 了一份源码,主要是对源码做了一些解读,可见 详情[1]

第一篇主要介绍 ahooks 的背景以及整体架构。

React hooks utils 库

自从 React 16.8 版本推出 React hooks,越来越多的项目使用 Function Component。React hooks utils 库随即诞生,它主要解决的两个问题如下:

  • 公共逻辑的抽象。

  • 解决 React hooks 存在的弊端,比如闭包等。

那现在社区有哪些比较优秀的 React Hooks utils 库呢?

react-use[2] 是社区比较活跃的 React hooks utils 库,它的 star 数达到了 29.6k。它的功能非常强大,拥有的 hooks 已经 100+。假如你需要功能比较齐全,可以考虑选择 react-use。

如果不需要非常齐全的功能,只需要一些常见的功能,react-use 可能会稍微冗余了,可以考虑我们今天的主角——ahooks[3],目前它的 star 数为 9.2k,也算是社区比较活跃。

ahooks

简介

官方介绍如下:

ahooks,发音 [eɪ hʊks],是一套高质量可靠的 React Hooks 库。在当前 React 项目研发过程中,一套好用的 React Hooks 库是必不可少的,希望 ahooks 能成为您的选择。

特点

它具有如下特点:

  • 易学易用。

  • 支持 SSR。

    • 将访问 DOM/BOM 的方法放在 useEffect 中(服务端不会执行),避免服务端执行时报错。

    • 源码中可以看到很多 isBrowser 的判断,主要是区分开浏览器环境和服务器环境。

  • 对输入输出函数做了特殊处理,且避免闭包问题。

    • 输入的函数,永远都是使用最新的一份。这个是通过 useRef 进行实现。

    • 输出函数,地址都是不会变化的,这个是通过 useMemoizedFn(ahooks 封装的)实现的,其实现也是通过 useRef 实现。后面我们会提到。

  • 包含大量提炼自业务的高级 Hooks。

  • 包含丰富的基础 Hooks。

  • 使用 TypeScript 构建,提供完整的类型定义文件。可以学习一些 TypeScript 的技巧。

hooks 种类

ahooks 基于 UI、SideEffect、LifeCycle、State、DOM 等分类提供了常用的 Hooks。如下所示:

a0a4a7934328b5682026514ae64d866a.png
图来自网络,侵删

ahooks 整体架构

项目启动

我们先从 ahooks 中 folk 一份[4],clone 下来。

yarn run init
yarn start

如果你能成功跑起服务,就会看到和官方文档一模一样的页面。

整体结构

从仓库的根目录的 package.json 中可以得到以下信息。

  • 文档是使用 dumi。是一款为组件开发场景而生的文档工具。

  • 该项目是一个 monoRepo。它的项目管理是通过 lerna[5] 进行管理的。

  • 单元测试是通过 jest 实现。

它的目录结构中,可以看到 docs 中存放仓库公共文档。packages 中存放两个包,hooks 和 use-url-state。整体的结构跟 dumi 中给出的 lerna 项目的结构相似。其中每个包下面的每个组件都可以书写对应的文档,不一样的是,hooks 中每个组件多了 __tests__ 文件夹,这个是用来写单元测试的。

138a0ea5444a5996c0f7e97547ab499f.png
跟 hooks 相似的组织形式

可以用以下一张图,大致总结一下 ahooks 的工程架构:

5b59f3b04e54a44c693a3d243aa41cbf.png

hooks

刚刚也提到,ahooks 是采用了 monoRepo 的方式,我们的源码都是在 packages 中,我们来看下 hooks。先看 packages/hooks/package.json。另外要使用 useUrlState 这个 hook,需要独立安装 @ahooksjs/use-url-state,其源码在 packages/use-url-state 中。我理解官方的用意应该是这个库依赖于 react-router,可能有一些项目不需要用到,把它提出来有助于减少包的大小。

npm i @ahooksjs/use-url-state -S

回到 packages/hooks。重点关注一下 dependencies 和 peerDependencies。可以看到其实它内部还是使用了一些其他的工具库的,比如 lodash(估计是避免重复造轮子,但感觉这样会导致包会变大)。后面我们也会对这些工具库做一个探索。

"dependencies": {"@types/js-cookie": "^2.x.x","ahooks-v3-count": "^1.0.0","dayjs": "^1.9.1","intersection-observer": "^0.12.0","js-cookie": "^2.x.x","lodash": "^4.17.21","resize-observer-polyfill": "^1.5.1","screenfull": "^5.0.0"
},
"peerDependencies": {"react": "^16.8.0 || ^17.0.0 || ^18.0.0"
},

另外解释下 peerDependencies。

peerDependencies 的目的是提示宿主环境去安装满足插件 peerDependencies 所指定依赖的包,然后在插件 import 或者 require 所依赖的包的时候,永远都是引用宿主环境统一安装的 npm 包,最终解决插件与所依赖包不一致的问题。这里的宿主环境一般指的就是我们自己的项目本身了。

这对于封装 npm 包非常重要。当你写的包 a 里面依赖另一个包 b,而这个包 b 是引用这个包 a 的业务的常用的包的时候,建议写在 peerDependencies 里,避免重复下载/多个版本共存。

总结

作为系列的第一篇,介绍了 React hooks utils 库的背景以及 ahooks 的特点简介和整体架构,接下来会探索各个常见的 hooks 方法实现,敬请期待。

参考

  • ahooks 正式发布:值得拥抱的 React Hooks 工具库[6]

参考资料

[1]

详情: https://github.com/GpingFeng/hooks

[2]

react-use: https://github.com/streamich/react-use

[3]

ahooks: https://ahooks.js.org/zh-CN/guide

[4]

一份: https://github.com/GpingFeng/hooks

[5]

lerna: https://www.lernajs.cn/

[6]

ahooks 正式发布:值得拥抱的 React Hooks 工具库: https://developer.aliyun.com/article/768059

我在阿里招前端,我该怎么帮你?(现在还可以加模拟面试群)
如何拿下阿里巴巴 P6 的前端 Offer
如何准备阿里P6/P7前端面试--项目经历准备篇
大厂面试官常问的亮点,该如何做出?
如何从初级到专家(P4-P7)打破成长瓶颈和有效突破
若川知乎问答:2年前端经验,做的项目没什么技术含量,怎么办?

如何准备20K+的大厂前端面试

99704e8b76f0cf1645aac0c11e4e8d32.gif

················· 若川简介 ·················

你好,我是若川,毕业于江西高校。现在是一名前端开发“工程师”。写有《学习源码整体架构系列》20余篇,在知乎、掘金收获超百万阅读。
从2014年起,每年都会写一篇年度总结,已经坚持写了8年,点击查看年度总结。
同时,最近组织了源码共读活动,帮助4000+前端人学会看源码。公众号愿景:帮助5年内前端人走向前列。

7233f176c16ff7a9bf4279ce06b13db3.jpeg

扫码加我微信 lxchuan12、拉你进源码共读

今日话题

目前建有江西|湖南|湖北 籍 前端群,想进群的可以加我微信 lxchuan12 进群。分享、收藏、点赞、在看我的文章就是对我最大的支持~

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/274580.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

gif动态图gif出处_我喜欢GIF的怪异事物

gif动态图gif出处I was recently reminded that I never wrote down all the weird things I learned about the GIF file format when implementing GIF decoding/playback at work last year. (I was reminded of this because I wrote a line in a corporate blog post draf…

C#字符串学习笔记

前言:记得我们老师说过一句话,对字符串的学习程度就是当别人打你一拳你知道痛的情况,所以字符串的处理我们必须学的差不多,这几篇博客完全是我的学习过程中记录的笔记,在这里分享一下让很多刚开始学习.net编程的人能够…

Git基础教程(必学)

大家好,我是若川。持续组织了近一年的源码共读活动,感兴趣的可以 加我微信 ruochuan12 参与,每周大家一起学习200行左右的源码,共同进步。同时极力推荐订阅我写的《学习源码整体架构系列》 包含20余篇源码文章。历史面试系列。另外…

用户体验改善案例_优化用户体验案例研究的五种方法

用户体验改善案例重点 (Top highlight)I’ve had the opportunity to give several portfolio reviews, and I want to share some common themes I see and how you can improve them to put your best foot forward as you search for that new product design gig.我有机会发…

video from html5

掌握HTML5中的多媒体--视频(video) 除非你一直生活在一个偏远的岛屿上,过去一年左右的时间,你应该已经听说过HTML5的各式炒作。HTML5将重塑富Web应用的未来。 下面 Figure 1的示例展示了HTML5中video标签与传统的object标签的不同. Figure 1 1. <section> 2. <h…

我捡到宝了!2022版前端面试上岸手册,最新最细致!

大裁员背景下&#xff0c;没什么比辞职后找不到工作更扎心&#xff01;在行情好转前&#xff0c;前端程序员只能“猥琐发育”&#xff0c;不轻易跳槽&#xff0c;同时要修炼内功&#xff1a;对八股文、底层源码、重点项目等进行查缺补漏&#xff0c;静待行情好转抓住机会&#…

flo file_Flo菜单简介:可扩展的拇指友好型移动导航

flo fileWhen it comes to using my phone, I’m a thumb guy and I like using my phone held in one hand. Well, apparently 49% of us prefer it like this.说到使用手机&#xff0c;我是个拇指小伙&#xff0c;我喜欢用一只手握住手机。 好吧&#xff0c;显然我们当中有49…

超炫的iphone应用UI/UX设计赏析

日期&#xff1a;2012-10-5 来源&#xff1a;GBin1.com 要想成为一款成功的iOS应用&#xff0c;不单单是功能设计&#xff0c;还需要有超棒的用户界面和用户体验的完美设计。为了带给大家更多的设计灵感&#xff0c;今天我们分享另外一套来自dribbble的iOS应用UI和UX设计&…

Git实战进阶教程

大家好&#xff0c;我是若川。持续组织了近一年的源码共读活动&#xff0c;感兴趣的可以 加我微信 ruochuan12 参与&#xff0c;每周大家一起学习200行左右的源码&#xff0c;共同进步。同时极力推荐订阅我写的《学习源码整体架构系列》 包含20余篇源码文章。历史面试系列。另外…

什么是设计模式_什么是设计?

什么是设计模式Imagine, you are out waiting for a taxi. You are about to miss your appointment. You wait for minutes but Good Lord! — there’s not a single taxi that can offer you a ride.想象一下&#xff0c;您正在外面等出租车。 您将错过约会。 您等待几分钟&…

hive实现not in

当前HIVE 不支持 not in 中包含查询子句的语法&#xff0c;形如如下的HQ语句是不被支持的: 查询在key字段在a表中&#xff0c;但不在b表中的数据 select a.key from a where key not in(select key from b) 该语句在hive中不支持 可以通过left outer join进行查询,&#xff0…

有哪些值得学习的大型 React 开源项目?

大家好&#xff0c;我是若川。持续组织了近一年的源码共读活动&#xff0c;感兴趣的可以 加我微信 ruochuan12 参与&#xff0c;每周大家一起学习200行左右的源码&#xff0c;共同进步。同时极力推荐订阅我写的《学习源码整体架构系列》 包含20余篇源码文章。历史面试系列。另外…

成年人的样子是什么样子_不只是看样子

成年人的样子是什么样子As a branding, packaging, and digital product designer, both at Input Logic and as a freelancer, I work with clients across a wide array of industries, and am responsible for simultaneously getting to the heart of what each client wan…

HDU 3664 Permutation Counting(DP)

题目链接 弱爆啦&#xff0c;组合弱爆了&#xff0c;反正是没想出来怎么搞这个题&#xff0c;其实这个公式不难推啊&#xff0c;反正就是没推出来。今天队内赛&#xff0c;实在是没办法了&#xff0c;暴力写了个DFS&#xff0c;先把10以内的打出表来&#xff0c;发现类似杨辉三…

如何在工作中打造影响力,带动同事?

大家好&#xff0c;我是若川。持续组织了近一年的源码共读活动&#xff0c;感兴趣的可以 加我微信 ruochuan12 参与&#xff0c;每周大家一起学习200行左右的源码&#xff0c;共同进步。同时极力推荐订阅我写的《学习源码整体架构系列》 包含20余篇源码文章。历史面试系列。另外…

谷歌maps菜单语言设置_Google Maps:拯救未来之路— UX案例研究

谷歌maps菜单语言设置I have a lousy sense of direction, so Google Maps has always been my right-hand app. On a whim last year, I decided to skip the beach and sunburn and head to Budapest for spring break. That’s when Google Maps became my best friend.我的…

this和prototype

this出现在构造函数中&#xff0c;更多的是表示一种特有的属性&#xff1b; prototype主要用于拓展函数的属性&#xff0c;方法。 在函数类实例化的时候&#xff0c;this的属性需要复制相应的副本&#xff0c;prototype不用。 function Blog(title,content) { this.titletitle;…

1万小时后,我从外包走进了字节跳动,现在出了一本书,文末送书!

谨以此书献给相信“努力有用”的你by 大史不说话《 前端跨界开发指南&#xff1a;JavaScript工具库原理解析与实战》先做个自我介绍我是大史不说话&#xff0c;是一名前端工程师&#xff0c;一个相信“努力有用”的、不太聪明的、行动力还可以的程序员。曾经因为一篇《10000小时…

视觉设计师跟平面设计_使设计具有视觉吸引力

视觉设计师跟平面设计Interaction Design is very gratifying.交互设计非常令人满意。 From fast critical thinking to extracting ideas in tangible forms within the team is sure fun and challenging.从快速的批判性思维到在团队内部以有形的形式提炼想法&#xff0c;无…

ExtJs4 笔记 Ext.tab.Panel 选项卡

本篇讲解选项卡控件。 一、基本选项卡 首先我们来定义一个基本的选项卡控件&#xff0c;其中每个Tab各有不同&#xff0c;Tab的正文内容可以有三种方式获取&#xff1a; 1.基本方式:通过定义html和items的方式。 2.读取其他html的信息:通过设置contentEl就可以获取其他html的信…