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

编程语言 2023-07-12 16:40:25 阅读次数: 0

文章目录

学习内容来源：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
prettier 2.8.4
json-server 0.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 应用：实现项目列表

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

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

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

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

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

1.⽤useRef实现useDocumentTitle - useRef与Hook 闭包详解

(1)使用 Helmet 自定义标题

安装 react-helmet 和它的类型声明文件 @types/react-helmet：

npm i react-helmet
npm i -D @types/react-helmet
  • "react-helmet": "^6.1.0"
  • "@types/react-helmet": "^6.1.6"
  • 大概率需要 --force

修改 src\unauthenticated-app\index.tsx（使用 Helmet 自定义标题）：

...
import {
    
     Helmet } from 'react-helmet'

export const UnauthenticatedApp = () => {
    
    
  ...
  return (
    <Container>
      <Helmet>
        <title>请登录或注册以继续</title>
      </Helmet>
      ...
    </Container>
  );
};
...

修改 src\authenticated-app.tsx（使用 Helmet 自定义标题）：

...
import {
    
     Helmet } from 'react-helmet'

export const AuthenticatedApp = () => {
    
    
  ...
  return (
    <Container>
      <Helmet>
        <title>项目列表</title>
      </Helmet>
      ...
    </Container>
  );
};
...

查看效果

(2)⽤ useRef 实现 useDocumentTitle

编辑 src\utils\index.ts（新增 useDocumentTitle）：

...
export const useDocumentTitle = (title: string, keepOnUnmount: boolean = true) => {
    
    
  const oldTitle = document.title

  useEffect(() => {
    
    
    document.title = title
  }, [title])

  useEffect(() => () => {
    
    
    if (!keepOnUnmount) {
    
    
      document.title = oldTitle
    }
  }, [])
}

keepOnUnmount 默认保持现有 title 不会还原

修改系统默认标题 public\index.html：

<title>Jira任务管理系统</title>

修改 src\unauthenticated-app\index.tsx（使用 useDocumentTitle 代替 Helmet 自定义标题）：

...
import {
    
     useDocumentTitle } from "utils";

export const UnauthenticatedApp = () => {
    
    
  ...
  useDocumentTitle('请登录或注册以继续')
  ...
};
...

修改 src\authenticated-app.tsx（使用 useDocumentTitle 代替 Helmet 自定义标题）：

...
import {
    
     useDocumentTitle } from "utils";

export const AuthenticatedApp = () => {
    
    
  ...
  useDocumentTitle('项目列表', false)
  ...
};
...

查看效果，并切换页面

提交代码到远程仓库，接下来是下饭时间（这部分更改的代码后续会通过 git 清掉）

编辑 src\utils\index.ts 的 useDocumentTitle：

...
export const useDocumentTitle = (title: string, keepOnUnmount: boolean = true) => {
    
    
  const oldTitle = document.title
  console.log('渲染时的oldTitle', oldTitle)

  useEffect(() => {
    
    
    document.title = title
  }, [title])

  useEffect(() => () => {
    
    
    if (!keepOnUnmount) {
    
    
      console.log('卸载时的oldTitle', oldTitle)
      document.title = oldTitle
    }
  }, [])
}

打开登录页，清理控制台，点击登录可看到：

渲染时的oldTitle 请登录或注册以继续

登出，可看到

渲染时的 oldTitle 项目列表
卸载时的 oldTitle 请登录或注册以继续

分析过程：

  • 登录：AuthenticatedApp 预加载（willMount）
    • useDocumentTitle 执行
      • 存储当前 oldTitle 请登录或注册以继续
      • 执行第一个 useEffect 更改 title 为 项目列表（加载 didMount）
      • 将第二个 useEffect 的 callback 存起来（预预卸载）
  • 登出：UnauthenticatedApp 预加载（willMount）
    • useDocumentTitle 执行
      • 存储当前 oldTitle 项目列表
      • 在第一个 useEffect 前执行之前存储的 上个页面的 第二个 useEffect 的 callback（预卸载 willUnmount）
    • 将页面 title 还原为当时（未登出）存起来的 oldTitle 请登录或注册以继续（还原这一步即使 UnauthenticatedApp 没有执行 useDocumentTitle 也会执行 callback）
      • 执行 useDocumentTitle 第一个 useEffect 更改 title 为 传入的 title
      • …

接下来深度模拟探究一下这一过程：

新建：src\screens\ProjectList\test.tsx：

import {
    
     useEffect, useState } from "react"
import {
    
     useMount } from "utils"

export const Test = () => {
    
    
  const [num, setNum] = useState(0)

  const add = () => setNum(num + 1)

  useMount(() => {
    
    
    setInterval(() => {
    
    
      console.log('useMount setInterval', num)
    }, 1000)
  })

  useEffect(() => () => {
    
    
    console.log(num)
  }, [])

  return <div>
    <button onClick={
    
    add}>add</button>
    <p>
      number: {
    
    num}
    </p>
  </div>
}

编辑 src\screens\ProjectList\index.tsx（使用组件 Test）：

...
import {
    
     Test } from "./test";

export const ProjectList = () => {
    
    
  ...
  return (
    <Container>
      <Test/>
      ...
    </Container>
  );
};
...

查看效果，点击 add 按钮随机增加，定时器中一直是0，登出后查看控制台，也是 0 ，和之前明明在 AuthenticatedApp 中 oldTitle 已经改为“项目列表”，最终登出后却是“请登录或注册以继续”惊人的相似

这就是 react hook 与 闭包 经典的坑

接下来自定义函数来模拟这个过程:

编辑：src\screens\ProjectList\test.tsx：

import {
    
     useEffect, useState } from "react"
import {
    
     useMount } from "utils"

const test = () => {
    
    
  let num = 0

  const effect = () => {
    
    
    num += 1
    const message = `现在的num值${
      
      num}`
    return function unmount() {
    
    
      console.log(message)
    }
  }

  return effect
}

const add = test()
const unmount = add()
add()
add()
unmount() // 按照直觉，add()执行三次，这里应该打印3，但是实际是1

export const Test = () => {
    
    ...}

刷新页面，打印的是1，按闭包思路分析执行过程：

// 执行 test 返回 effect 函数
const add = test()
// 执行 effect 函数，返回引用了 message1 的 unmount 函数
const unmount = add()
// 执行 effect 函数，返回引用了 message2 的 unmount 函数
add()
// 执行 effect 函数，返回引用了 message3 的 unmount 函数
add()
unmount() // 按照直觉，add()执行三次，这里应该打印3，但是实际是1

懂了吗？每次调用闭包中 callback effect() 都是唯一的，之间并无关联，而 const unmount 拿到的只是某一次 callback effect() 的返回值，当然也是独一无二的，这即是闭包的优势，也是注意不到时，闭包的坑

如何避免呢？其实代码中已经提醒了：

React Hook useEffect has a missing dependency: 'num'. Either include it or remove the dependency array.

编辑：src\screens\ProjectList\test.tsx（弃用 useMount 换回 useEffect，并在 useEffect 中都监听 num，且在 unmount 时清除 Interval）：

...
export const Test = () => {
    
    
  ...
  useEffect(() => {
    
    
    const id = setInterval(() => {
    
    
      console.log('useMount setInterval', num)
    }, 1000)
    return () => clearInterval(id)
  }, [num])

  useEffect(() => () => {
    
    
    console.log(num)
  }, [num])

  ...
}

重新执行：每次 add 后，定时器都会 输出最新 num, 第二个 useEffect，即 unmount 输出上一次的 num

回归项目代码（理解看注释）：

export const useDocumentTitle = (title: string, keepOnUnmount: boolean = true) => {
    
    
  const oldTitle = document.title;
  // 这里的 oldTitle 一直都是最新的
  console.log('渲染时的oldTitle', oldTitle)

  useEffect(() => {
    
    
    document.title = title;
  }, [title]);

  useEffect(() => () => {
    
    
    if (!keepOnUnmount) {
    
    
      console.log('卸载时的oldTitle', oldTitle)
      // 若不指定监听依赖 title，这里读到的就是 旧oldTitle
      document.title = oldTitle;
    }
  }, []);
};

这样有意无意地使用了闭包的特性，但是并不友好。接下来换个方式，使用 useRef 实现 useDocumentTitle:

修改 src\utils\index.ts：

import {
    
     useEffect, useRef, useState } from "react";
...
export const useDocumentTitle = (title: string, keepOnUnmount: boolean = true) => {
    
    
  const oldTitle = useRef(document.title).current;

  useEffect(() => {
    
    
    document.title = title;
  }, [title]);

  useEffect(() => () => {
    
    
    if (!keepOnUnmount) {
    
    
      document.title = oldTitle;
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);
};

查看效果，清理测试代码并提交

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

猜你喜欢

转载自blog.csdn.net/qq_32682301/article/details/131692617
今日推荐
火速冲上 GitHub 热榜 —— 开源编程语言、框架哪有这么可爱？
北京人形机器人创新中心发布全球首个纯电驱拟人奔跑的全尺寸人形机器人“天工”
LFOSSA 源来如此公开课 | 掌握云原生未来：CNCF 认证全面攻略与备考秘籍
国产云输入法——仅华为无云端数据上传安全问题
开源日报 | 工业开源项目OGG 1.0；姐姐，你要和我一起配置火狐吗；苹果AI遥遥落后？Fedora 40
开放签电子签章：停止新增，优化体验，前进更进（五一假期前工作）
开源日报 | 中学生开源前端动画引擎；全球首个Llama3 8B中文版开源模型；联想电脑恐出局；Linus讽刺AI炒作
周排行
浏览器对同一域名进行请求的最大并发连接数
React Hook之自定义Hook
【转】MyBatis缓存机制
-Java-泛型
自动化测试常用脚本-发送邮件
LeetCode#859: Buddy Strings
java、Python处理字符串
第二篇の博客
Hadoop伪分布式环境安装
SQL Server进阶（十一）临时表、表变量
每日归档
更多
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)
2024-04-23(26)
2024-04-22(39)
2024-04-21(0)
2024-04-20(6)
2024-04-19(5)
2024-04-18(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022