taro

2023-09-03 16:33| 来源: 网络整理| 查看: 265

Taro-Hooks 是为 Taro 量身定做的一个 Hooks Library

前言

在1年前, taro-hooks发布了1.0版本. 经历了一段时间迭代之后, 覆盖了近 70%+ 的 API. 提供了近 45+ 可用的 hooks. 其中还包含了完美适配 Taro 的 useRequest. 当时发布之后, 就有小伙伴有询问关于 Vue 版本的计划, 现在, 2.0.0.beta 版本, 携多框架支持归来! 目前提供的插件已经支持 React、PReact、RN以及Vue3. 此外, 由于本次架构为plugin + runtime. 你也可以为你想要使用的端自己编写符合taro-hooks要求的插件来实现支持!

本次2.0.0.beta的版本代号为: Serro (为赛罗奥特曼的英文). 旨在成为泰罗奥特曼的好帮手. 助力大家开发taro程序.

TL;DR 新文档(docusaurus) 新示例(双框架示例) 新架构(plugin) 新类型(类型收窄, 集合类型) 新结构(抽离use-request) 新用法(名称简写, 使用更方便) 新成员(ryan-117) 文档

此次，我们将文档的框架从dumi替换成了docusaurus. 样式上与主文档基本一致. 并且增加了docsearch来助力全站检索.

关于为什么重新制作文档?

dumi是一个很优秀的React文档框架. 但是由于Taro程序在H5的一些特殊处理. 使得作者需要在使用dumi的时候做一些poly处理. 这可能会导致示例和完整项目有一定的偏差. 而docusaurus我们利用它的plugin进行remark的注入, 来避规了上面所担心的问题. 此外docusaurus很强大, 我也推荐大家可以尝试一下.

此外我们的示例全部使用了外链的完整的taro应用的页面来进行展示. 避规了由于1x不完整的用例导致的线上用例有偏差的情况. (当然这样也会对应的增加文档的加载时长.) 与之对应新文档也增加了PWA的支持. 由于我们的站点是部署在vercel上的. 部分同学可能由于墙的原因访问不够稳定. 那么可以使用PWA将文档离线到电脑上

新文档还隐藏了不少小彩蛋和小功能, 有兴趣的小伙伴可以慢慢探索一下. 另外我们在beta版本测试的过程中还会推出typeDoc版本的文档, 有些小伙伴可能只想关注类型, 我们会快马加鞭将双版本文档发布出来.

架构

本次的架构遵循了Taro的插件式架构: plugin + runtime. 我们为Vue3增加了一套等同于React的官方hook来抹平内部的一些逻辑书写. 达到可以在多框架上表现一致的效果.（当然, 使用上可能会和标准的还是会有一点出入, 但是基本上保持一致.）有兴趣的同学可以去github上查看

如果看过源码的小伙伴应该有了解到, 1x的taro-hooks在api层面对一些端进行了兼容. 但是当时的兼容手法是使用all in one + env的模式. 导致部分和端无关代码无法被tree-shake掉. 在新版本中, 我们使用taro内置的端文件的能力, 特定端的polyfill api使用xxx.${env}.ts来进行书写. 在我们端插件内也自动为大家开启了taro-hooks的端文件检索能力. 并且大家也可以更好的未taro-hooks进行端能力的扩写. 不再局限于一个文件了.

包

我们根据1x大家的hooks使用频率以及2x架构的特性, 细化了子包的拆分粒度. 不仅让包的功能性更加的明确, 也达到了瘦身的效果.

这次主要拆离的部分如下:

taro-hooks 主包, 主要包含了我们所有的关于api的量化hooks. 以及在上层抽离的一些业务性的hook. 本次拆离之后, 主要gzip后的尺寸由26.5kb减少到了12.5kb.

@taro-hooks/use-request 该包是将useRequest进行的子包抽离. 我们将比较常用的useRequest从主包中进行了抽离. 并且从 ahooks 2x 的内容升级到了 3x. 这当中不局限于增加了新的特性(包含错误重试以及插件功能等). 并且移除了默认的request services(即1x中默认兜底的taro.request). 更完整的主控性.

@taro-hooks/ahooks 该包主要包含了之前1.x的taro-hooks由于use-request而引入的一些基础的ahooks内的包. 这次我们将这些hooks抽离到了独立的包内. 用于瘦身整体的包体积. 且由于useRequest的抽离, 该包主要服务于useRequest. 若用户仍需要使用其中的hooks, 可独立的选择来进行包的引用.

@taro-hooks/plugin-(react|vue) 这类包为我们为对应框架增加的一些runtime能力. 达到让我们的hooks在多个不同的框架上达到一致的效果. 它的主要作用为帮助我们为项目增加一些特殊配置, 以及我们抹平多框架hooks差异的一些独有hooks.

快速使用

新版本和旧版本上使用有了一些步骤的增加, 大家若是旧项目进行升级, 可以参考步骤1&2. 若是新项目有创建, 推荐使用taro init project中的taro-hooks@canary模板.（作者已经为大家增加了对应框架的模板）.

关于基础框架版本限制: taro >= 3.3.0 若使用Vue的话. Vue需要 >= 3.x 安装使用: npm i taro-hooks@canary vue: npm i @taro-hooks/plugin-vue@canary -D react: npm i @taro-hooks/plugin-react@canary -D config/index.js: module.exports = { ... plugins: ['@taro-hooks/plugin-(vue|react)'], ... } index.jsx | index.vue : import { useEnv } from 'taro-hooks'; const env = useEnv(); 若想要在不安装taro-hooks的前提下使用use-request. 可以直接安装我们独立的子包 npm i @taro-hooks/use-request@canary 使用和在taro-hooks中无异. 但是要注意的是我们依然需要安装上面对应框架的插件来支持我们包内对于跨框架兼容的部分代码. 或者直接使用 taro init taro-hooks@canary 使用 taro-hooks@canary 模板进行创建. 体验

现在体验小程序已经更新至了最新的2.0.0.beta. 可在线体验最新的hooks. 目前线上的小程序使用的是Vue3 + nutui来进行搭建. 也从侧面为大家展示了 taro-hooks@canary 对 Vue3 的支持度.