React进阶之前端业务Hooks库（二）

前端业务Hooks库

Action
- deploy.yml
- test.yml
基于 state 的 hooks 方法
- useBoolean
- - packages/hooks/src/useBoolean/index.ts
- usePrevious
- useDeleteRole
- 防抖和节流
- - useDebounce
  - useThrottle
- localStorage和sessionStorager区别
- - packages/hooks/src/useLocalStorageState
  - packages/hooks/src/useSessionStorageState
  - packages/hooks/src/createUseStorageState
模块

完整的CI/CD的过程如何去实现
基于state开发的时候，和状态相关的hooks如何去做

Action

基于git action做的，其实是devops(开发运维)中的一个环节，主要是Ops环节，开发完成到发布的过程要怎么做
现在的开发部署不需要从0到1部署一个空的真正的集群，或者空的服务器，直接使用现成的服务器

今天的项目借助于GitHub(也可以用gitlab，Jenkins，docker compose)去做的，注重的是通过什么方式去进行构建/部署/发布流程

xx.yml -> 命令行的缩进表达序列化的展示，类似json，只是一种文档后缀的格式，可视化表达的功能

.github
- workflows 针对于github中创建这样的目录，目录中对应的文件格式都是 -> .yml 进行git action部署的一个格式
  - deploy.yml
  - test.yml

结合在发布流程中，当我们触发某个钩子函数，一般称之为hook，结合发布的动作
针对git的workflow，git的阶段，commit,push,pull,PR,不同的阶段要触发不同的节点，这个节点就是我们对应的钩子
针对触发的节点上，就能够进行自定义功能，自定义事件

deploy.yml

对于我们而言要自动化发布，要怎么做？
在hooks开发完后要进行打包，打包后要进行发布

安装

pnpm run init

安装完成后

需要将docs文件，这里是dumi做的文件发布
还需要将打包产物publish到npm上
push 到 master上

on
- master
  …

vscode安装 github actions插件
在这里插入图片描述
这个能力：

基于github workflow的能力，跳转到指定的功能上

则可以监测记录的分支
jobs:类似jest的子工作
runs-on：基于github免费的服务器
permissions：开发时候要用到

gh-pages：部署的站点的分支
在这里插入图片描述

则可以获得官方提供的免费域名，

name: Build and Deploy
# 监听动作
on:  #github aciton的onpush: #push一个commit或tag时候branches: #能够检测到master分支- master
jobs: #类似jest一系列的子工作build-and-deploy: #构建和部署 runs-on: ubuntu-latest #基于github上提供的免费的服务器，这里使用的是最新的ubuntu机器permissions: #开发时候需要用到contents: write #提供一个写文件的，因为要把内容写到分支中去steps: # 针对build-and-deploy的步骤- name: Checkout #要去使用git actions功能模块uses: actions/checkout@v2.3.1- name: Lock npm version #安装指定的node版本uses: actions/setup-node@v3with:node-version: 16.18.0- name: Install and Build #安装和构建，与本地工作一致run: |npm i -g pnpmpnpm run initpnpm run build:doc      #也就是dumi build，打包后的dist文件就是最终部署到服务器上的env: #node的选项：最大老生代内存的大小为4M，保证执行安装时候不会超出内存堆栈 NODE_OPTIONS: '--max_old_space_size=4096'- name: Deploy #文档部署uses: JamesIves/github-pages-deploy-action@4.1.3 #github-pages-deploy-action插件，github提交的一系列的deploy功能with:BRANCH: gh-pages #部署分支FOLDER: dist ACCESS_TOKEN: ${{ secrets.ACCESS_TOKEN }} #github账号提供的密钥

github-pages-deploy-action

设置密钥tokens:
在这里插入图片描述
这里添加创建密钥

deploy.yml文件执行的内容：
在这里插入图片描述

test.yml

test CI：自动化测试
借助于github的git action做到的

name: Test CI
on:push:branches: - master 
jobs:build-and-deploy:runs-on: ubuntu-lateststeps:- name: Checkout  ️uses: actions/checkout@v2.3.1- name: lock npm versionuses: actions/setup-node@v3with:node-version: 16.18.0- name: Install and Buildrun: |npm i -g pnpmpnpm run initenv:NODE_OPTIONS: '--max_old_space_size=4096'- name: testrun: | #最后执行 run test pnpm run test

test CI：自动化测试
pnpm run test 执行成功后，会有一个对应的回调，如果失败的话，意味着单测失败，一般会发布到线上的环境。先通过master环境打包，打包之后，单测执行失败的话，就不会将docs功能部署到线上。

可以借助于AI功能进行发布npm包，部署环境文件的导出，
豆包，kimi: 使用git action 进行发布的，请提供一个git action文件
编码一个 yaml 文件，用于git actions，用于自动化的jest测试，并且能够使用上一次发布的缓存
在这里插入图片描述
作业1：在自己的项目上按照这套流程，自己发布一下

基于 state 的 hooks 方法

自定义hooks，一般是借助 useState,useMemo,useCallback,useEffect 这几个实现的

创建基于state的hooks要使用哪些呢？
这里说的是通用型的hooks，但在实际开发会有定制化的hooks
比如，要使用：

usePermissions 获取用户的身份状态，获取用户权限
useRole 当前用户登录的角色

interface IPermissionsProps{/** type*   page 页面权限*   slot 页面模块，按钮*/  type: "page" | "slot";/* 对应访问的权限功能 */authCode?: string;
}const useRolePermission=async () => {return await useRequest(async ()=>{// session，通过session读取用户登录身份const { authCodes=[] } = await api.getPermission(); //返回权限码return authCodes})
}const usePersmissions = (permissionProps:IPermissionsProps)=>{const { type='page' } = permissionProps;let hasPermission = false;const authCodes=useRolePermission;return authCodes?autoCodes?.includes(authCode):true;
}