1. Toy模板网首页
  2. > Toy博客

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

9月前 作者：程序边界 分类：Toy博客 阅读(39) 违法举报

这篇具有很好参考价值的文章主要介绍了【实战】 七、Hook，路由，与 URL 状态管理(上) —— React17+React Hook+TS4 最佳实践，仿 Jira 企业级项目（十一）。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

学习内容来源：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 应用：实现项目列表

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

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

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

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

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

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

  • 五、CSS 其实很简单 - 用 CSS-in-JS 添加样式(上)
  • 五、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
  }, []);
};
  • Hook API 索引 – React

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

部分引用笔记还在草稿阶段，敬请期待。。。文章来源地址https://www.toymoban.com/news/detail-553653.html

到了这里，关于【实战】 七、Hook，路由，与 URL 状态管理(上) —— React17+React Hook+TS4 最佳实践，仿 Jira 企业级项目（十一）的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处： 如若内容造成侵权/违法违规/事实不符，请点击违法举报进行投诉反馈，一经查实，立即删除！

分享到：
领支付宝红包 赞助服务器费用

相关文章

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包，优惠每天领

二维码1

领取红包

二维码2

领红包