【实战】 七、Hook,路由,与 URL 状态管理(下) —— React17+React Hook+TS4 最佳实践,仿 Jira 企业级项目(十三)

news/2024/6/17 5:20:27

文章目录

    • 一、项目起航:项目初始化与配置
    • 二、React 与 Hook 应用:实现项目列表
    • 三、TS 应用:JS神助攻 - 强类型
    • 四、JWT、用户认证与异步请求
    • 五、CSS 其实很简单 - 用 CSS-in-JS 添加样式
    • 六、用户体验优化 - 加载中和错误状态处理
    • 七、Hook,路由,与 URL 状态管理
      • 1+2.
      • 3~6
      • 7.完成URL状态管理与JS中的 iterator讲解


学习内容来源:React + React Hook + TS 最佳实践-慕课网


相对原教程,我在学习开始时(2023.03)采用的是当前最新版本:

版本
react & react-dom^18.2.0
react-router & react-router-dom^6.11.2
antd^4.24.8
@commitlint/cli & @commitlint/config-conventional^17.4.4
eslint-config-prettier^8.6.0
husky^8.0.3
lint-staged^13.1.2
prettier2.8.4
json-server0.17.2
craco-less^2.0.0
@craco/craco^7.1.0
qs^6.11.0
dayjs^1.11.7
react-helmet^6.1.0
@types/react-helmet^6.1.6
react-query^6.1.0
@welldone-software/why-did-you-render^7.0.1
@emotion/react & @emotion/styled^11.10.6

具体配置、操作和内容会有差异,“坑”也会有所不同。。。


一、项目起航:项目初始化与配置

  • 一、项目起航:项目初始化与配置

二、React 与 Hook 应用:实现项目列表

  • 二、React 与 Hook 应用:实现项目列表

三、TS 应用:JS神助攻 - 强类型

  • 三、 TS 应用:JS神助攻 - 强类型

四、JWT、用户认证与异步请求

  • 四、 JWT、用户认证与异步请求(上)

  • 四、 JWT、用户认证与异步请求(下)

五、CSS 其实很简单 - 用 CSS-in-JS 添加样式

  • 五、CSS 其实很简单 - 用 CSS-in-JS 添加样式(上)

  • 五、CSS 其实很简单 - 用 CSS-in-JS 添加样式(下)

六、用户体验优化 - 加载中和错误状态处理

  • 六、用户体验优化 - 加载中和错误状态处理(上)

  • 六、用户体验优化 - 加载中和错误状态处理(中)

  • 六、用户体验优化 - 加载中和错误状态处理(下)

七、Hook,路由,与 URL 状态管理

1+2.

  • 七、Hook,路由,与 URL 状态管理(上)

3~6

  • 七、Hook,路由,与 URL 状态管理(中)

7.完成URL状态管理与JS中的 iterator讲解

searchParams 拿到了, 接下来用暴露出来的 setSearchParams 来替换 ProjectList 里的 setParam

修改 src\screens\ProjectList\index.tsx

...
export const ProjectList = () => {const [param, setParam] = useUrlQueryParam(["name", "personId"]);...
};
...

但是这样使用 setParam 时若是传入一个 { name1: 'Jack' } 的参数,没有任何报错拦截,这样肯定是不行的,所以需要在 setParamsetSearchParams 中使用对 key 的判断

修改 src\utils\url.ts

import { useMemo } from "react";
import { URLSearchParamsInit, useSearchParams } from "react-router-dom";
import { cleanObject } from "utils";
...
export const useUrlQueryParam = <K extends string>(keys: K[]) => {const [searchParams, setSearchParams] = useSearchParams();return [useMemo(() => keys.reduce((prev, key) => {// searchParams.get 可能会返回 null,需要预设值来兼容return { ...prev, [key]: searchParams.get(key) || "" };// 初始值会对类型造成影响,需要手动指定}, {} as { [key in K]: string }),// eslint-disable-next-line react-hooks/exhaustive-deps[searchParams]),(params: Partial<{ [key in K]: unknown }>) => {const o = cleanObject({ ...Object.fromEntries(searchParams), ...params }) as URLSearchParamsInitreturn setSearchParams(o)},] as const;
};
  • 遇到类似下面这样的类型不匹配问题,可以直接使用 as 来强制指定为提示的类型
    • 类型“{ [x: string]: unknown; }”的参数不能赋给类型“URLSearchParamsInit | ((prev: URLSearchParams) => URLSearchParamsInit) | undefined”的参数。

通过 Object.fromEntries 引出 Iterator 的概念:

Symbol.iterator 为每一个对象定义了默认的迭代器。该迭代器可以被 for...of 循环使用。

Symbol.iterator - JavaScript | MDN

在浏览器的 console 中做个小实验:

  • 定义一个数组并使用 for..of 遍历
let arr = [1, 2, 3]
for(v of arr) { console.log(v) }
// 1
// 2
// 3
  • 通过 Symbol.iterator 属性查看 此数组的 遍历器
arr[Symbol.iterator]
// ƒ values() { [native code] }
  • 将其执行结果拿出来
let i = a[Symbol.iterator]()
i
// Array Iterator {}
//  [[Prototype]]: Array Iterator
//    next: ƒ next()
//    Symbol(Symbol.toStringTag): "Array Iterator"
//    [[Prototype]]: Object
  • 可以看到它有个 next() 方法,执行一下
i.next()
// {value: 1, done: false}
i.next()
// {value: 2, done: false}
i.next()
// {value: 3, done: false}
i.next()
// {value: undefined, done: true}
  • 接下来实现一下自定义遍历器
const obj = {data: ["hello", "world"],[Symbol.iterator]() {const self = this;let index = 0;return {next() {if (index < self.data.length) {return {value: self.data[index++] + "!",done: false};} else {return { value: undefined, done: true };}}};}
};for (let o of obj) {console.log(o);
}

线上地址:https://codesandbox.io/s/upbeat-wood-bum3j

回归项目代码,searchParamsURLSearchParams 类型,通过以下代码可以看出使用 Object.fromEntries 可以将其(entries)转为 object

new URLSearchParams({name: 'Jack'})[Symbol.iterator]
// ƒ entries() { [native code] }

代码逻辑明白了,接下来看下页面效果:

  • http://localhost:3000/projects?name=骑手&personId=18 直接访问,参数在页面中保持
  • 在页面中修改参数,URL 中同时更改,但有个小问题,下拉选择负责人时,页面中展示的是 personId,接下来解决一下

src\screens\ProjectList\index.tsx 中打印 param

src\screens\ProjectList\components\SearchPanel.tsx 中打印 users

运行代码可以发现,paramidstringusers 中是 number,没有很好兼容,暂时在src\screens\ProjectList\components\SearchPanel.tsx 中将 id 强制转换为 stringString(user.id)):

...
export const SearchPanel = ({ users, param, setParam }: SearchPanelProps) => {return (<Form css={{ marginBottom: "2rem", ">*": "" }} layout="inline">...<Form.Item><Select {...}><Select.Option value="">负责人</Select.Option>{users.map((user) => (<Select.Option key={user.id} value={String(user.id)}>...</Select.Option>))}</Select></Form.Item></Form>);
};

查看页面效果,功能正常啦!


部分引用笔记还在草稿阶段,敬请期待。。。


http://www.mrgr.cn/p/28058151

相关文章

Android应用开发(23)获取亮灭屏状态

Android应用开发学习笔记——目录索引 在android 应用程序获取亮灭屏状态的常用方法有&#xff1a; 使用PowerManager提供的API函数注册Broadcast监听 一、使用PowerManager提供的API函数 frameworks/base/core/java/android/os/PowerManager.java import android.os.Buil…

ChatGPT与Claude对比分析

一 简介 1、ChatGPT: 访问地址&#xff1a;https://chat.openai.com/ 由OpenAI研发,2022年11月发布。基于 transformer 结构的大规模语言模型,包含1750亿参数。训练数据集主要是网页文本,聚焦于流畅的对话交互。对话风格友好,回复通顺灵活,富有创造性。存在一定的安全性问题,可…

全国大学生数据统计与分析竞赛2021年【本科组】-B题:用户消费行为价值分析

目录 摘 要 1 任务背景与重述 1.1 任务背景 1.2 任务重述 2 任务分析 3 数据假设 4 任务求解 4.1 任务一&#xff1a;数据预处理 4.1.1 数据清洗 4.1.2 数据集成 4.1.3 数据变换 4.2 任务二&#xff1a;对用户城市分布情况与分布情况可视化分析 4.2.1 城市分布情况可视化分析 4…

Day47 算法记录|动态规划14子序列

子序列 1143. 最长公共子序列1035.不相交的线53. 最大子数组和 1143. 最长公共子序列 这道题和718. 最长重复子数组的区别&#xff1a;这道题的子序列可以不连续 这个视频讲解的很好 class Solution {public int longestCommonSubsequence(String text1, String text2) {char…

蓝海卓越计费管理系统任意文件读取下载

……人哪&#xff0c;活着是这么的苦&#xff01;一旦你从幸福的彼岸被抛到苦难的此岸&#xff0c;你真是处处走头无路&#xff1b;而现在你才知道&#xff0c;在天堂与地狱之间原来也只有一步之遥&#xff01; 漏洞描述 蓝海卓越计费管理系统存在任意文件读取漏洞&#xff0…

【Spring Boot】单元测试

单元测试 单元测试在日常项目开发中必不可少&#xff0c;Spring Boot提供了完善的单元测试框架和工具用于测试开发的应用。接下来介绍Spring Boot为单元测试提供了哪些支持&#xff0c;以及如何在Spring Boot项目中进行单元测试。 1.Spring Boot集成单元测试 单元测试主要用…

C语言指针详解

C语言指针详解 字符指针1.如何定义2.类型和指向的内容3.代码例子 指针数组1.如何定义2.类型和内容 数组指针1.如何定义2.类型和指向类型3.数组名vs&数组名数组指针运用 数组参数&指针参数一维数组传参二维数组传参一级指针传参二级指针传参 函数指针1.如何定义2.类型和…

MySQL(一)基本架构、SQL语句操作、试图

MySQL系列文章 MySQL&#xff08;一&#xff09;基本架构、SQL语句操作、试图 MySQL&#xff08;二&#xff09;索引原理以及优化 MySQL&#xff08;三&#xff09;SQL优化、Buffer pool、Change buffer MySQL&#xff08;四&#xff09;事务原理及分析 MySQL&#xff08;五&a…

LangChain大型语言模型(LLM)应用开发(五):评估

LangChain是一个基于大语言模型&#xff08;如ChatGPT&#xff09;用于构建端到端语言模型应用的 Python 框架。它提供了一套工具、组件和接口&#xff0c;可简化创建由大型语言模型 (LLM) 和聊天模型提供支持的应用程序的过程。LangChain 可以轻松管理与语言模型的交互&#x…

NLP实验案例100个(1-5)

实验一 array数组&#xff08;01&#xff09; 一、实验目的及要求 1.安装numpy环境&#xff0c;掌握基本的数组知识以及操作。 二、实验设备&#xff08;环境&#xff09;及要求 开发环境&#xff1a;jupyter notebook 开发语言以及相关的库&#xff1a;python开发语言、nu…

【计算机视觉 | 目标检测 | 图像分割】arxiv 计算机视觉关于目标检测和图像分割的学术速递(7 月 17 日论文合集)

文章目录 一、检测相关(5篇)1.1 TALL: Thumbnail Layout for Deepfake Video Detection1.2 Cloud Detection in Multispectral Satellite Images Using Support Vector Machines With Quantum Kernels1.3 Multimodal Motion Conditioned Diffusion Model for Skeleton-based Vi…

iOS开发-NotificationServiceExtension实现实时音视频呼叫通知响铃与震动

iOS开发-NotificationServiceExtension实现实时音视频呼叫通知响铃与震动 在之前的开发中&#xff0c;遇到了实时音视频呼叫通知&#xff0c;当App未打开或者App在后台时候&#xff0c;需要通知到用户&#xff0c;用户点击通知栏后是否接入实时音视频的视频或者音频通话。 在…

计算机网络 day7 扫描IP脚本 - 路由器 - ping某网址的过程

目录 network 和 NetworkManager关系&#xff1a; 实验&#xff1a;编写一个扫描脚本&#xff0c;知道本局域网里哪些ip在使用&#xff0c;哪些没有使用&#xff1f; 使用的ip对应的mac地址都要显示出来 计算机程序执行的两种不同方式&#xff1a; shell语言编写扫描脚本 …

如何维护你的电脑:提升性能和延长使用寿命

如何维护你的电脑&#xff1a;提升性能和延长使用寿命 &#x1f607;博主简介&#xff1a;我是一名正在攻读研究生学位的人工智能专业学生&#xff0c;我可以为计算机、人工智能相关本科生和研究生提供排忧解惑的服务。如果您有任何问题或困惑&#xff0c;欢迎随时来交流哦&…

在自定义数据集上微调Alpaca和LLaMA

本文将介绍使用LoRa在本地机器上微调Alpaca和LLaMA&#xff0c;我们将介绍在特定数据集上对Alpaca LoRa进行微调的整个过程&#xff0c;本文将涵盖数据处理、模型训练和使用流行的自然语言处理库(如Transformers和hugs Face)进行评估。此外还将介绍如何使用grado应用程序部署和…

高算力AI模组前沿应用:基于ARM架构的SoC阵列式服务器

本期我们带来高算力AI模组前沿应用&#xff0c;基于ARM架构的SoC阵列式服务器相关内容。澎湃算力、创新架构、异构计算&#xff0c;有望成为未来信息化社会的智能算力底座。 ▌性能优势AI驱动&#xff0c;ARM架构服务器加速渗透 一直以来&#xff0c;基于ARM架构的各类处理器…

对比CahtGPT Bard Claude2对中文的理解

对比CahtGPT Bard Claude2对中文的理解 今天简单测试了一下目前这三个很火的模型对中文的理解能力 简单问题 鲁迅和周树人的关系 Bard CahtGPT Claude 介绍一下平凡的世界这本书 Bard CahtGPT

GitHub仓库如何使用

核心&#xff1a;GitHub仓库如何使用 目录 1.创建仓库&#xff1a; 2.克隆仓库到本地&#xff1a; 3.添加、提交和推送更改&#xff1a; 4.分支管理&#xff1a; 5.拉取请求&#xff08;Pull Requests&#xff09;&#xff1a; 6.合并代码&#xff1a; 7.其他功能&…

网络安全行业相关证书

一&#xff1a;前言 对于考证这个话题&#xff0c;笔者的意见是&#xff1a;“有比没有好&#xff0c;有一定更好&#xff0c;但不一定必须&#xff1b;纸上证明终觉浅&#xff0c;安全还得实力行”。很多人对于各种机构的考证宣传搞得是云里雾里&#xff0c;不知道网络安全行业…

虚拟局域网VLAN

概述 广播域 使用一个或多个以太网交换机互连接起来的交互式以太网&#xff0c;其所有站点都属于同一个广播域&#xff0c;随着交换式以太网规模的扩大&#xff0c;广播域响应扩大&#xff0c;从而形成一个巨大的广播域。 但是巨大的广播域会带来很多的弊端&#xff1a; 广…