- 博客(57)
- 收藏
- 关注
RSS订阅原创 【项目实战篇】React状态管理库Zustand
本文介绍了Zustand，一个轻量级的状态管理库，如何安装、基础使用，包括创建store、处理同步与异步操作，以及切片模式的使用。Zustand以其易用性和模块化的特性与Redux类似。
2025-07-05 18:02:47
879
原创 【项目实战篇】什么是jwt
是一种基于令牌的认证机制，广泛应用于前后端分离的系统中。它通过生成、传递和验证一个加密的令牌（Token），来实现用户身份认证和授权。如需实现，推荐配合 Node.js 的。库，方便快速生成和验证 JWT。JWT 由三部分组成，用。
2025-07-04 16:09:07
430
原创 【项目实战篇】CSS Module
Modules 不是官方规范或浏览器中的实现，而是构建步骤中的一个过程（在 Webpack 或 Browserify 的帮助下），它改变了类名和选择器的作用域（即有点像命名空间）默认 Less 或者 CSS 的规则是全局生效的，任何一个组件，只要有同名的 className 就会共用样式。CSS Module 可以有效避免作用域问题，它会生成一个唯一的标识作为 className。在 React 中默认开启了 CSS Module，样式表文件需要以。想要修改第三方组件样式，默认情况通过。
2025-06-24 15:56:38
176
原创 【项目实战篇】Vite环境变量
若想在 vite build 时运行不同的模式来渲染不同的标题，可以通过传递。为前缀的变量才会暴露给经过 Vite 处理的代码。选项标志来覆盖命令使用的默认模式。默认情况下，开发服务器 (Vite 在一个特殊的。
2025-06-23 17:16:24
495
原创 Router中RouterProvider使用详解
在 React Router v6.4+ 中，RouterProvider 是一个核心组件，用于提供基于数据路由（data routers）的新型路由方案。它替代了传统的 <BrowserRouter>，支持更强大的数据加载和操作功能（如 loader 和 action）。
2025-06-22 17:53:23
262
原创 React Router Data API Loader数据加载器和useLoaderData
Loader数据加载器和useLoaderData的使用
2025-06-22 16:45:08
434
原创 React Router Data API Action提交和useActionData
1、在定义路由的时候，有个loader属性，属性值是一个回调方法orderLoader，回调方法中是加载element组件所需要的data（异步或同步的），如下，组件element会先执行loader的回调，再去加载element的Order组件。2、在组件Order中通过useLoaderData获取orderLoader方法的返回值。只有上面四个API创建的路由才有Data API功能。
2025-06-21 18:03:22
120
原创 TypeScript关键知识点---keyof、typeof、in
JS当中获取key的语法：Object.keys()TS当中获取key的类型：keyof。
2025-06-20 15:55:26
236
原创 TypeScript---void、never、any、unknown类型
能确定类型的，尽量定义类型。无法确定类型的，可以使用 any 进行兜底。当函数没有返回值时，可以使用void定义。any和unknown可以接收任意类型值，any可以赋值给任意类型，但unknown不可以赋值给任意类型。
2025-06-20 15:21:38
229
原创 详解tsconfig.app/node.json文件
TypeScript 使用 tsconfig.json 文件作为其配置文件，当一个目录中存在 tsconfig.json 文件，则认为该目录为 TypeScript 项目的根目录。
2025-06-20 15:11:28
123
原创 new WeakMap()和new Map()
WeakMap是一种特殊的映射（Map），用于存储键值对。与普通的Map不同，WeakMap的键必须是对象（如数组、函数等），不能是原始值（如字符串、数字、布尔值等）。此外，WeakMap对键的引用是弱引用，这意味着如果键对象没有被其他代码引用，它可能会被垃圾回收机制自动回收。
2025-06-17 15:42:40
532
原创 useCallback（React性能优化）
useCallback的使用需要有所节制，不要盲目地对每个方法应用useCallback，这样做可能会导致不必要的性能损失。useCallback本身也需要一定的性能开销。useCallback并不是为了阻止函数的重新创建，而是通过依赖项来决定是否返回新的函数或旧的函数，从而在依赖项不变的情况下确保函数的地址不变。
2025-06-17 15:20:12
899
原创 useMemo（React性能优化）
使用场景当子组件接收的 props 不经常变化时当组件重新渲染的开销较大时当需要避免不必要的渲染时优点通过记忆化避免不必要的重新渲染提高应用性能减少资源消耗注意事项不要过度使用，只在确实需要优化的组件上使用对于简单的组件，使用memo的开销可能比重新渲染还大如果 props 经常变化，memo的效果会大打折扣使用场景当需要缓存复杂计算结果时当需要避免不必要的重新计算时当计算逻辑复杂且耗时时优点通过记忆化避免不必要的重新计算提高应用性能减少资源消耗。
2025-06-17 11:07:09
505
原创 useContext
设计的目的就是解决组件树间数据传递的问题。首先我们先通过createContext创建一个上下文，然后通过createContext创建的组件包裹组件，传递值。其实19版本和18版本是差不多的，只是19版本更加简单了，不需要再使用Provider包裹，直接使用即可。使用的方式就是通过useContext这个hook，然后传入上下文，就可以获取到上下文的值。如果使用多个Context，那么需要注意，如果使用的值是相同的，那么会覆盖。被包裹的组件，在任何一个层级都是可以获取上下文的值，那么如何使用呢？
2025-06-17 10:48:06
413
原创 useImperativeHandle
就可以暴露子组件的方法或属性给父组件， 然后父组件就可以通过ref调用子组件的方法或访问子组件的属性。forwardRef包装之后，会有两个参数，第一个参数是props，第二个参数是ref。父组件可以调用子组件的方法，或者访问子组件的属性。例如，我们封装了一个表单组件，提供了两个方法：校验和重置。可以将这些方法暴露给父组件，父组件便可以通过。我们使用的时候只需要将ref传递给。可以在子组件内部暴露给父组件。
2025-06-17 10:46:06
301
原创 useLayoutEffect
下面这个例子展示了 useLayoutEffect 和 useEffect 在DOM渲染时的区别。useLayoutEffect 会阻塞DOM渲染,而 useEffect 不会。是 React 中的一个 Hook，用于在浏览器重新绘制屏幕之前触发。与 useEffect 类似。可以记录滚动条位置，等用户返回这个页面时，滚动到之前记录的位置。useLayoutEffect 返回。浏览器完成布局和绘制。浏览器完成布局和绘制。
2025-06-17 10:41:00
278
原创 useEffect
输入决定输出：相同的输入永远会得到相同的输出。这意味着函数的行为是可预测的。无副作用：纯函数不会修改外部状态，也不会依赖外部可变状态。因此，纯函数内部的操作不会影响外部的变量、文件、数据库等。
2025-06-17 10:37:19
830
原创 useState
案例在2后面插入2.5，通过slice，截取前面的元素，因为slice返回一个新的数组，然后在中间插入我们需要插入的元素，然后把末尾的元素也通过slice截取出来，拼接到后面。此时index应该打印1，但是还是0，因为我们正常编写的代码是同步的，所以会先执行，而set函数是异步的所以后执行，这么做是为了性能优化，因为我们要的是结果而不是过程。创建一个新数组，包含了原始数组的所有元素，然后在末尾添加新元素，如果想在头部添加新元素，返过来即可。React 会存储新状态，使用新值重新渲染组件，并更新 UI。
2025-06-17 10:11:42
578
原创 React组件通信Props
将属性变为可选的这儿使用title举例title?: string然后将props进行解构，定义默认值{title = '默认标题'}tsxtitle?: stringid: numberobj: {a: numberb: numberconst Test:React.FC<Props> = ({title = '默认标题'}) => {
2025-06-17 10:07:55
760
原创 React组件
此时App是一个单体，我们在真正做项目的时候，我们需要把它分解成可管理的，可描述的组件。React 对于什么是组件和什么不是组件并没有任何硬性规定，这完全取决于你！如果它在程序里是一个块，那么它就是一个组件如果它在程序里面经常出现，那么也它也是组件使用通用的 UI 元素作为组件，可以让你只更改一处，就能更改所有使用该组件的地方。
2025-06-17 10:01:45
268
原创 react原理篇-requestidlecallback和MessageChannel
能较快执行，在 0～1ms 内触发，像 setTimeout 即便设置 timeout 为 0 还是需要 4～5ms。然后将任务添加到队列里面，并且添加进去的时候还需要根据优先级进行排序，然后调用workLoop 执行任务。它提供了两个端口（port1 和 port2），通过这些端口，消息可以在两个独立的线程之间双向传递。它提供了一种机制，允许开发者在浏览器空闲时运行低优先级的任务，而不会影响关键任务和动画的性能。的原因，是首先异步得是个宏任务，因为宏任务中会在下次事件循环中执行，不会阻塞当前页面的更新。
2025-06-17 09:58:35
995
原创 React原理深度解析
当我们用 canvas 绘制动画时，每一帧绘制前都会调用 ctx.clearRect 清除上一帧的画面，如果当前帧画面计算量比较大，导致清除上一帧画面到绘制当前帧画面之间有较长间隙，就会出现白屏。为了解决这个问题，我们可以在内存中绘制当前帧动画，绘制完毕后直接用当前帧替换上一帧画面，由于省去了两帧替换间的计算时间，不会出现从白屏到出现画面的闪烁情况。FPSFramesPerSecond 指的画面每秒钟传输的帧数，60FPS指的是每秒钟60帧；然后我们更新了节点 A C B E。未使用fiber版本。
2025-06-17 09:50:09
547
原创 React(babel)
Babel 是一个 JavaScript 编译器,提供了JavaScript的编译过程，能够将源代码转换为目标代码。官网查看AST（举例子说明一下 转换的 定义的函数 比如大小写转换）Babel所有的包1个 1个的介绍一下！！常用的就是core 都帮你融合到里面了安装依赖手把手写代码了创建一个文件夹！！安装依赖创建一个index.js 创建一个 test.js。
2025-06-16 23:00:00
637
原创 JavaScript代码是如何被执行的
计算机不能直接理解高级语言，只能直接理解机器语言，所以必须要把高级语言翻译成机器语言，计算机才能执行高级语言编写的程序。根据语言的执行流程，可以把语言分成编译型语言和解释型语言。编译型语言：程序在执行之前需要一个专门的编译过程，把程序编译成 为机器语言的文件，运行时不需要重新翻译，直接使用编译的结果就行了。程序执行效率高，依赖编译器，跨平台性差些。如C、C++、go等.解释型语言: 程序不需要编译，程序在运行时才翻译成机器语言（所以执行前需要环境中安装了解释器），每执行一次都要翻译一次。因此效率比较低。效率
2025-06-16 18:54:06
742
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人