昆明seo网站管理,企业可以在哪些网站做免费宣传,项目协同管理软件,订餐网站怎么做大家好#xff0c;我是若川。持续组织了近一年的源码共读活动#xff0c;感兴趣的可以 加我微信 ruochuan12 参与#xff0c;每周大家一起学习200行左右的源码#xff0c;共同进步。同时极力推荐订阅我写的《学习源码整体架构系列》 包含20余篇源码文章。历史面试系列。另外… 大家好我是若川。持续组织了近一年的源码共读活动感兴趣的可以 加我微信 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 进行实现。输出函数地址都是不会变化的这个是通过 useMemoizedFnahooks 封装的实现的其实现也是通过 useRef 实现。后面我们会提到。包含大量提炼自业务的高级 Hooks。包含丰富的基础 Hooks。使用 TypeScript 构建提供完整的类型定义文件。可以学习一些 TypeScript 的技巧。hooks 种类ahooks 基于 UI、SideEffect、LifeCycle、State、DOM 等分类提供了常用的 Hooks。如下所示图来自网络侵删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__ 文件夹这个是用来写单元测试的。跟 hooks 相似的组织形式可以用以下一张图大致总结一下 ahooks 的工程架构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的大厂前端面试················· 若川简介 ·················你好我是若川毕业于江西高校。现在是一名前端开发“工程师”。写有《学习源码整体架构系列》20余篇在知乎、掘金收获超百万阅读。从2014年起每年都会写一篇年度总结已经坚持写了8年点击查看年度总结。同时最近组织了源码共读活动帮助4000前端人学会看源码。公众号愿景帮助5年内前端人走向前列。扫码加我微信 lxchuan12、拉你进源码共读群今日话题目前建有江西|湖南|湖北 籍 前端群想进群的可以加我微信 lxchuan12 进群。分享、收藏、点赞、在看我的文章就是对我最大的支持~
