GoldenaArcher的博客

React 系列导航基础系列（已完）什么是 JSX，以及如何使用 JSX元素 vs 组件状态 & 状态更新 & 生命周期方法事件处理受控表单 vs 不受控表单React Router 的基本应用进阶系列React 内置 API 的案例学习及使用React Portal 案例学习React Context 案例学习：子组件内更新父组件的状态源码学习配置及运行结点的初始化其他React递归生成组件一文快速上手 Redux...

简单的描述一下我们现在有的功能，以及我想要提升的部分我们的项目是一个大型的 B2B 的项目，因此后端部分的检查配置特别多，这也就导致我们有很多的 enum——真的很多，一千多行，上百个 enums，而这只是在我内部使用的 data definition 文件中的。前端的业务相对而言会更加的复杂，尤其是 UI 需要基于不同的业务场景，将本来的 enum 进行切片，只渲染与当前业务场景相关的 enum。

省流：太长不想看，可以直接拖到最后拉 RTKQ 的解决方法先简述一下问题的背景情况，起源于自己做的一个私人练手项目的 jwt token 验证，结构大体如下：access token，其中 access token 的过期时间比较短——目前设置成 15 分钟该 token 本身会包含更多的信息，具体取决于项目需求，以目前主流的 OIDC 来说，规范可以包含以下信息：可以看到，常见的用户信息都在 OIDC 的规范里。

今天写个人项目练手的时候搜到了一个比价有趣的实现，于是用了一下，发现这个 concept 不是特别的熟，于是上网找了下，返现了一个叫的概念。搜索了一下后，发现 csdn 上关于这方面的比较少，很多搜出来的结果虽然写的是复合组件，但是实际上的逻辑更像是组合组件(composite components)甚至是 deepseek 给出来的结果都有些混淆：React 复合组件设计模式复合组件是一种常见的 React 设计模式，它通过组合多个子组件来构建复杂的 UI 结构。

自从换了 redux toolkit 之后还没实现过持久化，本来还是想用 redux-persist 的，毕竟以前一直用它，而且 RTK 的官方文档上也有列举……不过很可惜的事情就是，redux-persist 上一次更新还是 2021 年从 JS 升级到 TS，然后这也导致了在 audit 这个 package 的时候出现了一些 security warning，会导致项目没办法部署……最后因为要实现的功能比较简单，最后参考了一下另一个 n 多年没更新的包，自己实现了一下功能。

这个新的 hook 可以监听到 React 外部 store——通常情况下可以是 local storage/session storage 这种——的变化，随后在 React 组件内部去更新对应的状态官方文档其实解释的比较清楚了，使用监听的 store 必须要实现以下两个功能：subscribe其作用是一个 subscriber，主要提供的功能在，当变化被监听到时，就会调用当前的 subscriber。

根据项目经验是这样的，自从换了 TS 之后，就再也没有二次封装过了使用 TS 真的可以有效解决 typo 和 intellisense 的问题这里依旧使用一个简单的 todo 案例去完成。

总体上来说这次重构的效果还是挺好的，完成了：测试代码的添加虽然是从 redux 开始，不过我们终于开始写测试了……代码更加的模块化使用 redux 集中化数据这一部分其实也减少了一些重复调用的代码，毕竟数据和页面也存在 1-to-many 的情况单个页面开发速度提升 50%之前简单的页面实现周期大概是一周左右(5-6 天)，现在因为代码已经封装好了，所以实现周期提速到了 2-3 天现有的代码量大概优化了 50%+每个页面渲染本身优化了大概 40%左右。

这段时间都在重构代码，把本来奇奇怪怪(singleton)的实现改成用 redux 的实现，然后就突然想到……即然 redux 的改变不涉及到 UI 的改变，那么是不是说可以单独写 redux 的测试……？找了一下资料，发现比想象中的简单很多，所以就稍微记一下。

碰到了一些 Jest 的报错，列一下搜到的解决方案。

其实大体上主要还是 redux 的配置比较多一些，其他部分都挺灵活的，而且和业务绑定的比较多，我也不方便说，说了也不一定有参考意义项目的结构是一个比较风格化的东西，我用的比较喜欢的风格有点变态的说已经把这个项目变成了我喜欢的样子……？并不代表这一定是一门项目会用的风格，这是 react 的优点也是缺点完成 redux 部分的 refactor 之后，下一步考虑的就是使用 lerna 对项目升级，做成一个 micro-frontend 的项目。

这两天正好收尾一个 Redux 页面的重构，碰到了一些错误处理的方式，这里就写个笔记总结一下碰到的问题和几种处理方式大体上是分为同步函数和异步函数两个方面去处理。

是个可以在重渲染的过程中缓存计算结果的 React Hook。memo 使用方法为：其中 是一个计算过的值，一般的用法是一个由返回值的函数， 是一个包含所有需要监控参数的数组，这个数组对于整个 memo 的过程来说非常的重要。 在第一次渲染时会返回 ，在其他的渲染过程中，如果 产生变化，那么就会重新调用 函数，并返回重新计算过的值。这其实也算是一个 gocha，因为之前项目中出现了一个 bug 就是由 造成的。大概流程是使用 缓存了一个值传到了公司内部开发的 UI 库中，UI 库返回了正确的数值

Demo 如下：算是一个用到现在对使用过的组件和 API 进行一个……阶段性总结吧。

这一段主要讲一些关于 Navigation 的用处，Navigation 有点类似于网页的导航，起到在 app 中切换页面的用途，使用的包为。是一个功能很强大的库，常用的导航功能都有包含，可以搭配 expo 使用也可以单独与 react native 一起使用。这里会简单介绍一下 Stack（点击页面中的组件进行跳转）和 Drawer（菜单栏，类似于网页开发的 hamburger）。

一些常用组件的介绍，React Native 毕竟使用 React 实现，所以写 RN 的代码其实和写 web 差不多，这里就不多介绍了。唯一需要注意的一点就是，所有 RN 使用的组件都需要从 RN 导入，因为 RN 需要将代码编译成原生 ios/android 组件，所以没办法像网页版一样直接使用div这些组件。

这里假设你已经知道一些 React 的知识，因此关于 JSX 等 React 基础这里不会过多介绍。

最近继续在找处理 React 异步调用的方式……主要是现在需求比较复杂，用 cache query 的方式去实现有那么一丢丢的麻烦，又不是很想用额外的包，所以就想看看有没有比较好的一些处理方式。当然，可以用到生产环境上的没找到，不过找到了一个还在试验阶段的新功能——usehook，毫不夸张地说，这个 hook 打破了 React 既有的 hook 规范。use具体的 proposal 和 discussion 在这里：，里面还有一些挺有趣的 hooks 和用法，比如说已经被 merged 的。

第一点和第二点就算是原生的 Redux，处理起来虽然稍微有些的麻烦，不过实现起来相对而言也比较简单。还不支持这个操作，因此大多数情况下借用第三方的工具，如 Redux Saga 之类的实现这种功能会比较方便。不过从 Redux Toolkit 之后，就可以比较方便的使用。async thunk 中可以使用 async/await 锁住其他的 action 操作。这样的情况下，A 和 B 可以各调用各的，哪块数据拉完就先渲染哪块。另一个调用这两个 slice 的 thunk。A 和 B 必须同时完成调用。

上篇笔记写的比较乱，加上这回又学了点新的东西，所以重新整合一下。

刚开始老板没说需要在 Layout 中渲染数据，所以所有的调用都是在 component level 进行实现。但是一旦说 Layout 也需要更新，那么这个就无法实现了——毕竟父组件的状态没有更新。后面合计了一下究竟是做 props drilling 还是用 context 后，决定用 context 实现——路由都封装了，再改真的好麻烦。

这里不多赘述。触发副作用主流的操作方式有两种：组件内操作适合只会在当前组件中触发的 API 操作写一个 action creator 进行操作适合跨组件操作二者并没有谁好谁坏的区别，主要还是依赖于业务需求。

好久没写 Redux 了，最近老板让写一个 POC 去把现在的 usecase+repo 的结构转成 redux，所以就……toolkit 内部会进行监听，如果察觉到状态被修改了，那么 toolkit 内部会创建一个新的状态并进行返回。redux 的状态是不可变的，因此在使用老版的操作就需要返回一个新的状态，而不能直接修改原有的状态。，如果项目比较老的话，没有用最新版本的 react-redux 和 redux，就得用。找了一下资料，突然发现之前的写法已经落伍了……不需要额外设立一个变量去监听对应的。

最近踩到了一个坑，属于以前没有碰到过的问题，就是在本地测试的时候，docker 的 API 不知道为什么突然有了延迟，以至于在状态更新的时候，之前调用的数据重写了后来调用的数据。尽管输入的 id 是 2，理论上来说我想显示的内容就是 2，不过因为 1 有延迟，所以延迟的数据重写了本来应有的数据，导致渲染是正常的，数据是异常的这种事情。这也说明了之前的项目有可能会出现同样的问题（心虚），这也算是切身体会了，对于所有 useEffect 中的异步操作，清理都是非常必要的事情。

这一部分就是最近新折腾的取消调用，axios 的官方文档其实给的挺明确的，不过我想太多了……const {return {这部分的代码中，如果遇到了一些需要放弃调用的情况——如 token 已经过期等，就可以直接在 interceptors 中返回一个 AbortController 的 signal，会监听这个 signal，存在的情况下就会取消 API 调用。cancelToken 已经过期了，官方并不推荐使用。

公司要求完成一系列的安全课程（Security），其中正好有 React 相关的，就上完了这个课，并且发现了以前一些漏掉的问题，在此总结一下。

事件描述abort当文件读取放弃时调用，如调用error当文件读取出错时被调用load当文件成功被读取时调用loadend当文件读取结束时被调用loadstart当文件读取开始时被调用progress文件读取过程中随机调用\newline,loaded,和total几个事件的触发都可以通过});};属性描述一个用来描述文件读取时发生异常的表示文件读取的状态\newline0为实例已创建，但是还没开始读取\newline1为已经开始读取\newline2为操作已完成读完的文件，格式为对应的调用函数2。....

React 生产模式 Best Practice一些用于生产环境的 Best Practice禁用 React Dev Tool有两种解决方法。JS 版本：// disable react-dev-tools for this projectif (typeof window.__REACT_DEVTOOLS_GLOBAL_HOOK__ === "object") { for (let [key, value] of Object.entries( window.__REACT_DE

React 测试笔记 02 - 异步 UI 及 Mock API上一篇: React 测试笔记 01 - 基础 UI 类这里的功能函数基本为异步操作，以 React Testing Library 和 msw 为主要依赖。UI 操作大多数的 UI 操作是即时的，如上一篇提到的点击事件、输入事件，但是也有那么一两个特殊情况，其中一个就包括从 DOM 中移除元素。同步情况下 query 元素使用的函数以 getBy 开头，如 getByLabelText, getByPlaceholderText 等

React 测试笔记 01 - 基础 UI 类依稀记得去年找 Hooks 开发的时候还没这么多资料，感觉大半年过去之后科技立马跟上，@testing-library/react 已经成了 CRA 的内置包了……别卷了，卷不动了.jpg不过 React Testing Library 结合 jest-dom 确实提供了很多非常方便的测试函数，之后的需求也是项目需要更加正式一点，除了开发之外还要包含测试，那就……学起来吧。基础 UI 测试在测试文件中实现以下内容：import { fireEvent

React Router DOM 升级到 v6 后的一些报错信息之前在 React Router 的基本应用 讲了一下 react-router-dom 的一些基础用法。虽然那篇笔记写于去年，但是 react-router-dom 中有一些 breaking changes 导致原本的 API 已经被弃用。如果使用 npm i react-router-dom@5 的话，那么那篇笔记还是适用的，不过如果默认下载最新版本，那么程序就会抛出异常从而跑不起来。报错 1：‘Switch’ is not expo

swr，解决 React 项目 API 调用的最好方案搜了一圈，感觉 swr 源码学习的文章不少，但是好像使用方面的确实有限，所以……目前体感是觉得使用 swr 会比 redux-saga 要舒服一些，首先代码量小很多，其次同步异步方面的操作也更加简洁明了。swr 对各种 API 调用的支持也很好，官方文档还有包括 Axios 和 GraphQL 的配置，总体来说应该是最近使用的一些包中，最能够解决 React 项目中 API 调用的库了。swr 是 stale-while-revalidate 的缩

[React 进阶系列] 组成与继承组成(Composition) 与 继承(Inheritance) 是两种比较常用的代码复用方案。继承传统的 OOP 语言之中继承的用法较多，如比较传统的动物案例：#mermaid-svg-cs29rVhKtUePz0rU {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-cs29rVhKtUePz0rU .error-icon{f

React Context 案例学习：子组件内更新父组件的状态一直知道 React Context 是 React 内部实现状态管理的方法，也简单的跟着官方的案例敲了一下使用 Context 进行的渲染，不过始终因为 子组件中更新父组件父组件 这一方法的实现太过麻烦，最终还是决定使用 Redux——毕竟 Redux 虽然内部实现依靠的是 Context，但是它已经封装好了。不过最近还是想要深入的学习一下 React，也就包括其状态管理机制，正好学到一个非常干净的写法，也就借此写一篇笔记。基础的 Cont

React 源码学习系列 2 - 结点的初始化上一篇链接：React 源码学习系列 1 - 配置及运行这一篇主要就是疯狂地打断点和记新的名词(函数)，并不会涉及到 why(为什么要这么跑)，单纯的看看 what(什么东西在这里执行) 这样的问题。run()这一段代码是由 babel 执行的，函数如下：function run(transformFn, script) { var scriptEl = document.createElement("script"); scriptEl.

React Portal 案例学习什么是 Portal使用 Portal事件冒泡Context 的使用参考资料最近看文档/教程/资料，偶然间看到了一个以前没有碰到的东西：Portal。本着学习的精神打开了文档一看，才发现 Portal 的存在真的解决了一些以前碰到的问题。什么是 PortalPortal 是 ReactDOM 在 v16 的时候新推出的一个特性，到目前来说已经有 5 年的特性。它的优点有这几个：可以在虚拟 DOM 树之外挂载 React 结点挂在的 React 结点虽然物理地址在

React18 正式版放出前几天还在看源码，想说试试看 React18 的特性，没想到今天正式版就出来了：现在就根据 React 团队放出的博文：React v18.0 了解一下 React18 的新特性。Concurrent（并发）其实之前在跑源码的时候就在视觉上意识到 React18 是真的进入并发时代，一下是 v17 版本的渲染：对比一下 Reactv18 的渲染：可以看到比起 v18，在 React 代码运行的部分（即粉色代码段），v18 运行调动了 2 个 tasks，而 v17

React 源码学习系列 1 - 配置及运行之所以会加配置这部分的原因是因为目前(2022.03.19)官方的 React 项目是没有办法 build 的……一些配置被修改过了之后就和 rollup 产生了冲突，从而 build 失败。除此之外，还有一些准备工作需要完成，具体的步骤可以在官方文档中 Contributing > How to Contribute 中有说明，官方文档地址:https://reactjs.org/docs/how-to-contribute.html。配置需求来自

本章讲述 React Router 的基础用法，主要讲解应用，不讲更更基层的东西，同时，这篇也是近期 React 基础系列的最后一篇。其实 React Router 不是官方提供的库，属于生态圈补充的，但是没有路由基本上就无法完成 SPA(Single Page Application，单页应用)，所以就将 React Router 的内容提到这里来学习了。主要内容由 路由功能的实现，页面的跳转 两个部分组成。

[React 基础系列] 受控表单 vs 不受控表单受控表单refs不受控表单不受控组件总结之前的学习部分带了一些表单内容的使用——之前的案例基本上是用的都是 input，接下来就学习一下受控表单和不受控表单之间的区别，并且通过非受控表单了解一下非受控组件的知识点。受控表单指的是状态由 React 内部进行管理的表单，自然，不受控表单值得就是状态不由 React 内部进行管理的表单。学习案例下载资源在：受控表单 vs 不受控表单-案例前复习过的内容：什么是 JSX，以及如何使用 JSX元素 v