- 博客(304)
- 资源 (4)
- 收藏
- 关注
RSS订阅原创 React-router v7 第六章(路由操作)
在平时工作中大部分都是在做增刪查改(CRUD)的操作，所以一个界面的接口过多之后就会使逻辑臃肿复杂，难以维护，所以需要使用路由的高级操作来优化代码。
2025-04-19 06:06:07
332
原创 React-router v7 第五章(路由懒加载)
懒加载是一种优化技术，用于延迟加载组件，直到需要时才加载。这样可以减少初始加载时间，提高页面性能。
2025-04-18 03:09:09
377
原创 React-router v7 第四章(路由传参)
React-router 一共有三种方式进行参数传递，参数传递指的是在路由跳转时，将参数传递给目标路由。Query的方式就是使用 ? 来传递参数，例如：跳转方式：获取参数：Params方式Params的方式就是使用 :[name] 来传递参数，例如：跳转方式：获取参数：State方式state在URL中不显示，但是可以传递参数，例如：跳转方式：获取参数：总结React Router 提供了三种参数传递方式，各有特点：选择建议：必要参数用 Params，筛选条件用 Query，临时数据
2025-04-17 00:01:44
348
原创 React-router v7 第三章(路由)
React-Router V7 的路由种类是非常多的，有嵌套路由布局路由索引路由前缀路由动态路由，大致上是分为这五种的，下面我们一一介绍。
2025-04-11 03:06:32
380
1
原创 React-router v7 第二章(路由模式)
在React RouterV7 中，是拥有不同的路由模式，路由模式的选择将直接影响你的整个项目。和。
2025-04-03 19:38:51
1075
原创 React-router v7 第一章(安装)
React-router 是 React的路由库，如果你学过Vue，跟Vue的Router很相似。它的作用就是，根据不同的。框架模式就是使用，React-router 提供的脚手架模板去安装，安装完成后会自带路由功能。，匹配不同的组件，然后进行渲染。pages目录创建两个组件，Home和About。所有的功能，包括数据处理。数据模式就是，我们可以使用自己的模板去创建。数据模式和声明模式的区别，数据模式可以享用。声明模式，也可以用自己的模板创建。的一部分功能，比如路由跳转。文件中引入路由，然后使用。
2025-04-02 11:28:06
685
原创 React第三十一章(组件实战)
这一章建议大家看完hookscss原理组件这些章节之后再来看，这样会更好理解。本章是额外新增的，因为之前的知识大家都掌握的差不多了，所以这一章节主要是让大家动手实践，巩固一下前面的知识。
2025-03-25 05:24:45
1165
原创 React第三十章(css原子化)
原子化 CSS 是一种现代 CSS 开发方法，它将 CSS 样式拆分成最小的、单一功能的类。比如一个类只负责设置颜色，另一个类只负责设置边距。这种方式让样式更容易维护和复用，能提高开发效率，减少代码冗余。通过组合这些小型样式类，我们可以构建出复杂的界面组件。
2025-03-15 23:19:31
1076
原创 React第二十九章(css in js)
css-in-js是将 CSS 代码 跟 JS 代码 混合在一起，通过 JS 来动态的生成 CSS 样式，但是这样的话与我们的认知是背道而驰的，正常应该是 CSS JS HTML 分离的，但是由于 CSS 缺乏作用域，所以形成了css-in-js这种写法，注意css-in-js并不是一种技术，而是一种思想。正所谓 前端三大件 分久必合合久必分。
2025-03-10 22:41:20
713
原创 失踪人口回归，最近接了一个私活，提升了很多。
整体是 pnpm + monorepo架构，为什么要这么做呢，因为这样设计前后端可以通过技术实现前后端共用一套声明文件，后端增加了一个字段，前端会立马报错需要添加新增的字段，这样能避免很多问题。目录就是存放公共的声明文件前后端一起用的前后端只需要把这个common项目安装到前后端项目即可第二个考虑为什么不用现成的模板呢所以综合考虑就自己干了 本来想跟群友一起搞的但是那时候缺米后来还是一个人承包了微服务设计网关层设计因为微服务太多了api地址各不相同，我想着是入口统一设计了网关层，然后通过网关层分发到各个微
2025-03-07 17:42:57
1111
5
原创 React第二十八章(css modules)
因为React没有Vue的Scoped，但是React又是SPA(单页面应用)，所以需要一种方式来解决css的样式冲突问题，也就是把每个组件的样式做成单独的作用域，实现样式隔离，而css modules就是一种解决方案，但是我们需要借助一些工具来实现，比如webpackpostcsscss-loadervite等。
2025-01-30 14:52:26
1467
2
原创 React第二十七章(Suspense)
Suspense 是一种异步渲染机制，其核心理念是在组件加载或数据获取过程中，先展示一个占位符（loading state），从而实现更自然流畅的用户界面更新体验。
2025-01-28 21:29:06
1466
原创 React第二十六章(createPortal)
注意这是一个API，不是组件，他的作用是：将一个组件渲染到DOM的任意位置，跟Vue的Teleport组件类似。
2025-01-27 23:05:49
1032
原创 React第二十五章(受控组件/非受控组件)
受控组件一般是指表单元素，表单的数据由React的 State 管理，更新数据时，需要手动调用setState()方法，更新数据。因为React没有类似于Vue的v-model，所以需要自己实现绑定事件。
2025-01-25 19:09:02
1145
原创 React第二十四章(自定义hooks)
因为在实际开发中，React的内置hooks并不能满足我们所有的需求，比如一些复杂的业务逻辑，或者是一些使用场景，需要我们自己来使用自定义hooks实现。自定义hooks必须以use开头自定义hooks可以调用其他hooks(内置的hooks和自定义的hooks)我们并不需要重复的造轮子，已经有很多现成的库可以使用，比如ahooksreact-useSWR等等，这些库都是经过社区验证的，可以放心使用。这里使用ahooks 举例。
2025-01-22 12:49:54
1061
原创 React第二十二章(useDebugValue)
下面通过实现一个useCookieHook 来展示的实际应用。这个 Hook 提供了完整的 cookie 操作功能，并通过来增强调试体验。${]*)(;() => {updateCookie('update-value') } } > 设置cookie < / button > < button onClick = {() => {deleteCookie() } } > 删除cookie < / button > < / div >);=([^;]*)(;
2025-01-15 10:09:20
922
原创 React第二十一章(useCallback)
useCallback的使用需要有所节制，不要盲目地对每个方法应用useCallback，这样做可能会导致不必要的性能损失。useCallback本身也需要一定的性能开销。useCallback并不是为了阻止函数的重新创建，而是通过依赖项来决定是否返回新的函数或旧的函数，从而在依赖项不变的情况下确保函数的地址不变。
2025-01-02 05:28:18
1010
原创 React第二十章(useMemo)
使用场景当子组件接收的 props 不经常变化时当组件重新渲染的开销较大时当需要避免不必要的渲染时优点通过记忆化避免不必要的重新渲染提高应用性能减少资源消耗注意事项不要过度使用，只在确实需要优化的组件上使用对于简单的组件，使用memo的开销可能比重新渲染还大如果 props 经常变化，memo的效果会大打折扣使用场景当需要缓存复杂计算结果时当需要避免不必要的重新计算时当计算逻辑复杂且耗时时优点通过记忆化避免不必要的重新计算提高应用性能减少资源消耗注意事项。
2024-12-31 03:09:55
1131
原创 React第十九章(useContext)
useContext 提供了一个无需为每层组件手动添加 props，就能在组件树间进行数据传递的方法。设计的目的就是解决组件树间数据传递的问题。
2024-12-15 09:09:27
897
1
原创 一个落魄程序员的2024年终总结
在年前的时候在错误的地点认识了一个女孩，因为她也是山西的，并且比我小两岁，我觉得挺合适的，她也心动了，我还想起来第一天见面的时候意犹未尽，你也心有灵犀的说了这句话，我还记得你给我转的520，你是第一个愿意给我花钱的女生，挑礼物也只挑最便宜的，我还记得我们逛了那么久，你就只要了10元的发卡，吃了一个13元的鸡翅包饭，还是两个人吃一个，喝奶茶也是两个人喝一个，住的旅馆也是挑最便宜的，你总说我骗你，但我从来没骗过你。
2024-12-14 18:00:53
1794
11
原创 React第十八章(useImperativeHandle)
可以在子组件内部暴露给父组件句柄，那么说人话就是，父组件可以调用子组件的方法，或者访问子组件的属性。如果你学过Vue，就类似于Vue的。
2024-12-09 06:43:34
792
原创 React第十六章(useLayoutEffect)
是 React 中的一个 Hook，用于在浏览器重新绘制屏幕之前触发。与 useEffect 类似。
2024-11-21 02:06:17
783
1
原创 React第十五章(useEffect)
useEffect 是 React 中用于处理副作用的钩子。并且useEffect 还在这里充当生命周期函数，在之前你可能会在类组件中使用 componentDidMount、componentDidUpdate 和 componentWillUnmount 来处理这些生命周期事件。
2024-11-13 14:26:56
982
原创 React第十四章(useDeferredValue)
useDeferredValue 用于延迟某些状态的更新，直到主渲染任务完成。这对于高频更新的内容（如输入框、滚动等）非常有用，可以让 UI 更加流畅，避免由于频繁更新而导致的性能问题。
2024-11-06 08:55:30
570
原创 React第十三章(useTransition)
是 React 18 中引入的一个 Hook，用于管理 UI 中的过渡状态，特别是在处理长时间运行的状态更新时。它允许你将某些更新标记为“过渡”状态，这样 React 可以优先处理更重要的更新，比如用户输入，同时延迟处理过渡更新。
2024-11-02 11:06:37
1489
1
原创 React第十二章(useSyncExternalStore)
我们实现一个useStorage Hook，用于订阅 localStorage 数据。这样做的好处是，我们可以确保组件在 localStorage 数据发生变化时，自动更新同步。实现代码我们将创建一个 useStorage Hook，能够存储数据到 localStorage，并在不同浏览器标签页之间同步这些状态。此 Hook 接收一个键值参数用于存储数据的键名，还可以接收一个默认值用于在无数据时的初始化。/*** @param key 存储到localStorage 的key。
2024-10-29 11:34:47
1603
1
原创 React第十一章(useReducer)
useReducer是React提供的一个高级Hook,没有它我们也可以正常开发，但是useReducer可以使我们的代码具有更好的可读性，可维护性。useReducer跟useState一样的都是帮我们管理组件的状态的，但是呢与useState不同的是useReducer是集中式的管理状态的。
2024-10-21 14:51:48
1576
2
原创 React第十章(useState)
useState是一个 React Hook，允许函数组件在内部管理状态。组件通常需要根据交互更改屏幕上显示的内容，例如点击某个按钮更改值，或者输入文本框中的内容，这些值被称为状态值也就是(state)。
2024-10-01 18:11:15
2042
原创 React第九章(组件通信)
将属性变为可选的这儿使用title举例title?: string然后将props进行解构，定义默认值{title = '默认标题'}title?: stringid: numberobj: {a: numberb: numberconst Test:React.FC = ({title = '默认标题'}) => {
2024-09-29 13:05:19
1577
1
原创 React第八章(初识组件)
如果它在程序里是一个块，那么它就是一个组件如果它在程序里面经常出现，那么也它也是组件使用通用的 UI 元素作为组件，可以让你只更改一处，就能更改所有使用该组件的地方。
2024-09-25 19:41:44
915
2
原创 React第六章(实现vdom，fiber，diff)
Virtual DOM 就是用JavaScript对象去描述一个DOM结构，虚拟DOM不是直接操作浏览器的真实DOM，而是首先对 UI 的更新在虚拟 DOM 中进行，再将变更高效地同步到真实 DOM 中。
2024-09-10 10:38:31
1772
3
原创 React第五章(swc)
SWC 既可用于编译，也可用于打包。对于编译，它使用现代 JavaScript 功能获取 JavaScript / TypeScript 文件并输出所有主流浏览器支持的有效代码。简单点来说swc实现了和babel一样的功能，但是它比babel快。FAQ为什么快?编译型Rust 是一种编译型语言，在编译时将代码转化为机器码（底层的 CPU 指令）。这种机器码在执行时非常高效，几乎不需要额外的开销。解释型JavaScript 是一种解释型语言，通常在浏览器或 Node.js 环境中通过解释器运行。
2024-09-08 01:06:30
1931
原创 React第四章(babel)
Babel 是一个 JavaScript 编译器,提供了JavaScript的编译过程，能够将源代码转换为目标代码。官网 https://babeljs.io/查看AST https://astexplorer.net/Babel所有的包 https://babeljs.io/docs/babel-traverse。
2024-09-06 21:42:54
2074
2
原创 React第二章(开发环境搭建 )
public 公共目录srcassets 静态资源App.css 根组件样式App.tsx 根组件index.css 全局css文件main.tsx 全局tsx文件vite-env.d.ts 声明文件.eslintrc.cjs eslint配置文件.gitignore git忽略文件index.html 入口文件index.htmlpackage.json 项目依赖模块文件tsconfig.json ts配置文件。
2024-09-05 15:57:48
1607
2
原创 React第一章(基本介绍)
React 是一个用于构建用户界面的 JavaScript 库。它由 Facebook(现Meta) 开发和维护，并在2013年开源。React 的设计初衷是帮助开发者构建复杂的用户界面，同时保持代码的可维护性和可扩展性。
2024-09-04 14:20:29
2329
3
原创 Nodejs 第八十六章（部署pm2)
它提供了多种功能，帮助开发者更好地管理和优化他们的应用程序,pm2 能做的其实有很多,比如监听文件改动自动重启,统一管理多个进程,内置的负载均衡,日志系统等等,此外，PM2 还集成了 Keymetrics，这是一个专门用于 Node.js 应用的性能监控和管理平台。：PM2 提供了全面的日志管理功能，可以方便地查看、合并和分析应用程序的日志信息。
2024-07-11 14:03:32
4981
Vue3最新源码分享。
2022-02-03
project.zip
2021-09-20
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人