峰会路转的博客

本文介绍了React-Router6中基于Routes组件实现路由的方法，并实现了全局懒加载功能。通过封装Element组件将路由参数(navigate/location/params等)自动注入到页面组件props中，简化了路由操作。文章包含核心代码实现：1) 路由容器封装，支持Suspense加载状态；2) 递归创建路由配置；3) 模拟withRouter高阶组件；4) 路由懒加载配置示例。最后展示了封装后的使用方法，如在组件中直接通过props获取路由参数，以及在非Route包裹组件中通过hooks获

在使用vite创建新项目的时候，出现这种运行不了的报错解决方法。

本文介绍了如何通过自定义React Hooks封装可复用的业务逻辑。示例包括：1) 修改页面标题的useTitle Hook，通过useEffect设置document.title；2) 捕获鼠标位置的useMouse Hook，使用useImmer管理状态并监听mousemove事件；3) 处理异步请求的useGetInfo Hook，管理加载状态和数据获取。这些自定义Hooks都基于React原生Hooks构建，可返回特定值或作为副作用函数使用，有效优化代码复用性。

本文演示了如何在React中使用useRef、forwardRef和useImperativeHandle实现父子组件通信。子组件通过forwardRef暴露方法，父组件通过ref调用子组件的handleFocus、handleSelect和handleClick方法。子组件内部使用useImperativeHandle对外暴露方法，并维护状态数据。这种模式适用于需要从父组件直接操作子组件功能的场景，如获取焦点、选中文字或修改信息等交互操作。

摘要：本文实现了一个完整的问卷列表增删改查功能，通过封装QuestionCard组件展示每个问卷项，并使用useImmer管理状态。主要功能包括：1) 编辑问卷标题；2) 删除问卷；3) 切换发布状态；4) 新增问卷。代码采用React+TypeScript开发，界面使用Ant Design组件库，实现了良好的类型检查和状态管理。通过immer库简化了不可变数据的操作，确保数据更新时的正确性。

本文介绍了如何使用Husky和Commitlint规范Git提交信息。首先通过npm install --save-dev husky安装Husky，并初始化生成.husky目录。然后配置pre-commit钩子执行代码校验，确保提交前通过ESLint检查。接着安装Commitlint相关依赖，创建配置文件规范提交信息格式，要求符合"type: description"的标准模式（如feat/fix/docs等类型）。最后通过修改文件编码解决可能出现的校验问题，实现规范的提交流程控制。这

本文介绍了如何在VSCode中统一团队代码风格的三步方案：1）安装Prettier并配置规则文件；2）安装Prettier插件；3）设置VSCode默认格式化工具为Prettier。通过.prettierrc.js文件定义具体格式规则（如单引号、缩进等），并在VSCode配置中指定Prettier为各类文件的默认格式化工具，实现保存时自动格式化。文末展示了TSX、CSS、HTML等文件的格式化效果，证明该方案能有效统一团队代码风格。

文章摘要：在创建React项目时添加ESLint支持遇到报错"Environment key 'jest/globals' is unknown"。问题原因是环境变量中包含了jest库的配置。解决方案是修改package.json文件，移除相关的jest配置项。修改后重新启动项目即可正常运行。文中提供了错误截图和解决步骤图示。

在styled-components项目中，背景图片无法显示的问题

前后端分离项目，后端还没有接口的时候，前端可以使用mockjs的技术实行假数据的模拟。这里使用的是mock的库msw实现这个业务.

重点知识点就是使用useReducer来攻坚小型的公共状态管理，来实现数据的不可变。

【代码】【react8】如何在网页中直接引入react进行demo开发。

前面说了下权限按钮的实现，这篇再具体点，控制到具体页面的某个按钮的权限。

权限按钮，跟权限路由一样，不同的角色登录app,展示不同的菜单页面，一个页面内管理可以进行删除记录等操作，普通的成员之有阅读的权限，这就是权限按钮需要做的事。

这只是简易的封装了下路由结构，没考虑二级路由或者多级的情况，思路就是这么思路，可以自行去实现下。

从上面的效果图看出，全程只创建了固定的8个div，无论你又多少条数据，就只产生八个div,盾冬的时候，产生了滚动视觉效果，只是数据内容更新了。通过只渲染当前可见区域的数据来提高性能，而不是一次性渲染所有数据。这样可以显著减少 DOM 元素的数量，从而提高页面的加载速度和滚动流畅性。

用过的应该知道，操作相对繁琐一点，dispatch本只可以出发。让dispatch可以返回一个函数。大大简化了操作。

做单元测试有很多的工具，今天在一个老项目中看到的用的工具是用的jest做的单元测试，特尝试更新下，遇到不少的问题。

通过前面的案例分析，我们可以概括出redux-saga做为redux统一action的形式，在redux-saga中，从UI中dispatch的action为原始对象集中处理异步等存在副作用的逻辑通过转化effects函数，可以方便进行单元测试完善和严谨的流程控制，可以较为清晰的控制复杂的逻辑。

redux-saga中，同步依旧直接dispatch一个,与之前的保持不变在组件页面派发的异步actionType的名字，不要与同步的相同，因为saga的执行流程，会导致执行两变reduce函数，可以根据自己的项目需要进行自定义命名。比如这里。

这一套下来，简直不要太简单了，同步异步的操作与大同小异了，很容易理解。参考redux-toolkit官网地址。

redux及都只能实现数据的同步修改更新，有点类似于vue中的mutation，只能做同步操作，异步的话不用actions来实现。由于在项目始终不可避免要实现的异步数据的更新，这明显不够用了。是时候引入我们的异步中间件了。

获取store中的数据触发reducer中的方法immutable中fromJS方法可以去官网参考它对不同类型的数据操作使用。

Immutable.js出自Facebook，是最流行的不可变数据结构的实现之一。它实现了完全的持久化数据结构，使用结构共享。所有的更新操作都会返回新的值，但是在内部结构是共享的，来减少内存占用在上一篇介绍redux的文章，我们可以看到在创建的reducer中进行数据更改的时候，会使用…来复制状态数据，为的就是不对原数据进行直接修改，只做替换，就是为了实现react的数据不可变immutable。

创建一个仓库，这个仓库的参数是我们创建的一个个reducer,每个reducer里面有两个参数，一个初始状态state作为数据源，一个根据不同操作更新数据的actiongetState获取store中的所有数据状态dispatch是页面其他地方比如按钮，生命周期中，触发更新状态数据subscribe是在dispatch出发更新，订阅更新状态，获取最新的数据状态是subscribe返回值，用来在组件销毁时清除订阅，提升性能。

函数组件在渲染（或更新）期间，遇到 useEffect 操作，会基于 MountEffect 方法把 callback（和依赖项）加入到 effect 链表中！1、按照顺序执行期间，首先会检测依赖项的值是否有更新「有容器专门记录上一次依赖项的值」；清除函数的副作用,比如在组件卸载时清除定时器,且在里面函数里面获取的状态是上次更新的状态，不是当前最新的值，所以需要使用 useRef 保存状态。2、遇到依赖项是空数组的，则只在第一次渲染完毕时，执行相应的 callback。useEffect 的原理。

React 通过将事件 normalize 以让他们在不同浏览器中拥有一致的属性。合成事件SyntheticEvent 实例将被传递给你的事件处理函数，它是浏览器的原生事件的跨浏览器包装器。除兼容所有浏览器外，它还拥有和浏览器原生事件相同的接口，包括 stopPropagation() 和 preventDefault()。如果因为某些原因，当你需要使用浏览器的底层事件时，只需要使用 nativeEvent 属性来获取即可。合成事件与浏览器的原生事件不同，也不会直接映射到原生事件。

setState 是 react 中更新 UI 的唯一方法，其内部实现原理如下：调用 setState 函数时，React 将传入的参数对象加入到组件的更新队列中。React 会调度一次更新（reconciliation），在调度过程中，React 会根据组件的 state 和 props 来计算出组件的新的状态，并比较新旧的状态，决定是否需要重新渲染组件。

原理：render 函数执行的时候，获取 vdom 的 ref 属性，然后根据 ref 的值去 dom 树中找对应的节点。非受控组件，基于 ref 获取 dom 的值，来实现页面的更新,不推荐使用,偶尔特殊的场景会使用。受控组件,基于修改 state 的值,修改组件内部的状态，来实现页面的更新，推荐使用。

插槽的作用，就是将父组件中的内容，原封不动的传递给子组件。想办法让组件更加灵活，具有更强的复用性。总结: 被冻结的对象，既是不可扩展的，也是密封的。被密封的，也是不可扩展的。元素,是数组的情况下，要使用下面的方式来接收，也可以使用。属性时，需要先拷贝一份，然后才能修改。插槽内容可以根据不同的需求，放到不同的位置。children 属性，传递子组件的。所以，我们在组件内部修改。html 片段用插槽。里面的方法来进行处理。

虚拟 dom 对象，是框架内部构建的一套对象体系，对象相关的属性方法都是 react 内部规定的，基于这些属性描述出，我们所有构建的视图中，dom 节点相关的特征。真实 dom，就是浏览器页面中，让用户看到的页面内容。执行后，会生成一个虚拟 dom 对象。，jsx 最终会被编译成。

实现的需求：在列表中如何缓存每个子组件，父组件重新渲染，子组件不更新，下面的列子假设Chart组件被包裹在memo中。你希望在ReportList组件重新渲染时跳过重新渲染列表中的每个Chart。但是，你不能在循环中调用。

react18里面的计算属性和使用useMemo来提升组件性能的方法。

在react中获取dom节点都知道用ref，但是在一个列表循环中，这样做是行不通的，需要做进一步的数据处理。

在react项目中，实现添加列表项，最后一项自动显示在可视区域范围！！

以上是比较常见的两种简单的方法，当然还有其他的实现，比如事件轮询，对进行封装拦截等等，都可以去尝试下，有空我再补充完善吧。

useReducer和useContext前面有单独介绍过，上手不难，现在我们把这两个api结合起来使用，该怎么用？还是结合之前的简易增删改查的demo，熟悉vue的应该可以看出，vuexuseContext类似于vue中的enjectprovided`,来分析下思路。

reducers必须是纯函数，纯洁性原则一个reducer只做一件事，单一职责原则。

js中时间的处理，不借助于moment/dayjs这样的工具库，原生获取格式化的时间，最简单的实现方式可以参考下面这样。

支持 js 表达式，包括函数调用，变量引用，三目运算，逻辑运算等。