- 博客(315)
- 资源 (4)
- 收藏
- 关注
RSS订阅原创 小满的五年心得体会(程序人生)
《从程序员到知识分享者：我的成长与思考》讲述了作者小满的职业转变与人生感悟。从工厂工人到月入过万的IT从业者，他经历了报复性消费后的抑郁焦虑，最终通过录制编程教学视频找到人生意义。他提出技术广度和表达能力是获得高薪的关键，并建议程序员提前规划副业应对35岁危机。文章分享了多位转型成功的案例，包括摄影、旅游、创业等方向。作者通过知识分享找到了充实快乐的生活方式，实现了从单纯编码到价值创造的人生跨越。
2025-07-21 13:38:59
1370
原创 React(useImmer) 补充篇
useImmer 是一个基于 immer 的 React Hook，它简化了不可变数据的操作。核心特性包括简化状态更新、类型安全和性能优化。安装方式为 npm install immer use-immer。 主要 API 为 useImmer，接受初始状态并返回当前状态和更新函数。特别适合处理嵌套对象和数组操作，使代码更直观。对于基本类型，其行为与 useState 相同。此外，useImmerReducer 结合了 useReducer 和 immer 的优势，让 reducer 函数更简洁。典型应用场
2025-07-21 11:26:26
876
原创 小满的年中总结
目标与计划： 2024年粉丝目标20万（当前13.8万）。计划开设新账号做短剧，优先更新React Native免费教程（感谢粉丝借用Mac）。技术更新优先级： 根据需求，技术教程重点：React Native > Electron > Next.js。后续将集中更新RN教程，并计划开发付费课程（2024.9-2025.6）。主要工作： 1-6月编写Node.js书籍、接私活、录制React教程；7月起转React Native新教程。日常涵盖视频、答疑、商单等。
2025-07-01 04:01:03
1123
9
原创 React HOC(高阶组件-补充篇)
HOC（高阶组件）是一种React组件设计模式，通过接收组件并返回新组件来实现逻辑复用。文章介绍了HOC的基本概念和使用场景，虽然hooks减少了HOC的使用，但在面试和特定场景中仍需掌握。入门示例展示了基于权限判断的HOC实现，进阶用法则演示了封装通用的埋点统计HOC，包括组件挂载/卸载跟踪和自定义事件上报。文章强调HOC应遵循命名规范（with前缀）、避免过度嵌套，并提供了完整的代码示例和埋点数据格式展示。
2025-06-26 15:10:10
637
原创 Zustand 第五章(订阅)
Zustand 状态管理库的订阅功能可以监听状态变化。通过 store.subscribe 方法，可以在组件内外部订阅状态变更，组件内订阅需放入 useEffect 避免重复订阅。使用 subscribeWithSelector 中间件可以精确订阅单个状态（如年龄变化），减少不必要的组件渲染。订阅方法返回取消订阅函数，还支持配置比较函数和立即触发选项。这种方式比直接使用选择器更高效，特别适合需要响应状态变化但不希望频繁重渲染的场景。
2025-06-14 02:36:22
702
原创 Zustand 第四章(中间件)
本文介绍了Zustand状态管理库中的中间件使用方式。主要内容包括：自定义日志中间件的实现原理和使用示例；DevTools调试工具的配置方法，包括浏览器插件安装和状态追踪；以及Persist持久化中间件的使用方法，包括存储方式选择和部分状态持久化配置。此外，文章还详细说明了如何清空持久化缓存。通过多个代码示例和截图，展示了这些中间件的实际应用场景，帮助开发者更好地管理应用状态。
2025-06-12 05:23:33
748
原创 Zustand 第三章(状态简化)
文章摘要：本文探讨了Zustand状态管理中的优化渲染问题。直接解构状态会导致组件不必要的重渲染，解决方案包括使用状态选择器精确选择所需状态，以及采用useShallow检查顶层对象引用变化来优化性能。文章通过具体代码示例展示了如何实现这两种优化方法，比较了优化前后的渲染差异，并提供了完整的实现代码。这些技巧可以有效提升React应用性能，避免不必要的组件渲染。
2025-06-09 09:20:38
377
原创 Zustand 第二章(状态处理)
Zustand状态管理与Immer的深度结合 摘要：本文介绍了Zustand状态库在处理深层嵌套状态时的解决方案。通过"葫芦娃"示例展示了未合并状态导致的数据丢失问题，引入Immer中间件来简化状态更新流程。详细说明了Immer在Zustand中的安装和使用方法，并通过代码对比展现了其优势。最后剖析了Immer的核心原理，包括写时复制和惰性代理机制，提供一个简化实现来理解其工作原理。这种组合方案有效解决了复杂状态管理中的不变性问题，同时保持了代码简洁性。
2025-06-08 22:04:00
1167
原创 Zustand 第一章(入门/安装)
Zustand是德语单词，意思是“状态”。中文空耳猝死丹特,基本上每一个框架都会有自己的状态管理工具，比如 Vue 的Vuex，React 的Redux，Zustand 自然也是一个状态管理工具。那么对比Redux，等状态管理工具Zustand 有什么优势呢？redux 是老牌状态管理库，能完成各种基本功能，并且有着庞大的中间件生态来扩展额外功能,但 redux 经常被人诟病它的使用繁琐。轻量级简单易用Provider易于集成扩拓展性无副作用immer。
2025-05-08 03:14:02
1025
2
原创 React-router v7 第七章(导航)
在React-router V7中，大致有四种导航方式：组件是一个用于导航到其他页面的组件，他会被渲染成一个标签，并具有实际的属性，指向其链接的资源。参数：要导航到的路径：是否替换当前路径：要传递给目标页面的状态：相对于当前路径的导航方式：是否重新加载页面：是否阻止滚动位置重置：是否替换当前路径：是否启用视图过渡to 属性是一个字符串，表示要导航到的路径。replace 属性是一个布尔值，表示是否替换当前路径，如果为，则导航不会在浏览器历史记录中创建新的条目，而是替换当前条目。
2025-05-04 17:24:22
1705
原创 React-router v7 第六章(路由操作)
在平时工作中大部分都是在做增刪查改(CRUD)的操作，所以一个界面的接口过多之后就会使逻辑臃肿复杂，难以维护，所以需要使用路由的高级操作来优化代码。
2025-04-19 06:06:07
665
原创 React-router v7 第五章(路由懒加载)
懒加载是一种优化技术，用于延迟加载组件，直到需要时才加载。这样可以减少初始加载时间，提高页面性能。
2025-04-18 03:09:09
922
原创 React-router v7 第四章(路由传参)
React-router 一共有三种方式进行参数传递，参数传递指的是在路由跳转时，将参数传递给目标路由。Query的方式就是使用 ? 来传递参数，例如：跳转方式：获取参数：Params方式Params的方式就是使用 :[name] 来传递参数，例如：跳转方式：获取参数：State方式state在URL中不显示，但是可以传递参数，例如：跳转方式：获取参数：总结React Router 提供了三种参数传递方式，各有特点：选择建议：必要参数用 Params，筛选条件用 Query，临时数据
2025-04-17 00:01:44
701
原创 React-router v7 第三章(路由)
React-Router V7 的路由种类是非常多的，有嵌套路由布局路由索引路由前缀路由动态路由，大致上是分为这五种的，下面我们一一介绍。
2025-04-11 03:06:32
794
1
原创 React-router v7 第二章(路由模式)
在React RouterV7 中，是拥有不同的路由模式，路由模式的选择将直接影响你的整个项目。和。
2025-04-03 19:38:51
1635
原创 React-router v7 第一章(安装)
React-router 是 React的路由库，如果你学过Vue，跟Vue的Router很相似。它的作用就是，根据不同的。框架模式就是使用，React-router 提供的脚手架模板去安装，安装完成后会自带路由功能。，匹配不同的组件，然后进行渲染。pages目录创建两个组件，Home和About。所有的功能，包括数据处理。数据模式就是，我们可以使用自己的模板去创建。数据模式和声明模式的区别，数据模式可以享用。声明模式，也可以用自己的模板创建。的一部分功能，比如路由跳转。文件中引入路由，然后使用。
2025-04-02 11:28:06
1651
原创 React第三十一章(组件实战)
这一章建议大家看完hookscss原理组件这些章节之后再来看，这样会更好理解。本章是额外新增的，因为之前的知识大家都掌握的差不多了，所以这一章节主要是让大家动手实践，巩固一下前面的知识。
2025-03-25 05:24:45
1347
原创 React第三十章(css原子化)
原子化 CSS 是一种现代 CSS 开发方法，它将 CSS 样式拆分成最小的、单一功能的类。比如一个类只负责设置颜色，另一个类只负责设置边距。这种方式让样式更容易维护和复用，能提高开发效率，减少代码冗余。通过组合这些小型样式类，我们可以构建出复杂的界面组件。
2025-03-15 23:19:31
1312
原创 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
971
原创 失踪人口回归，最近接了一个私活，提升了很多。
整体是 pnpm + monorepo架构，为什么要这么做呢，因为这样设计前后端可以通过技术实现前后端共用一套声明文件，后端增加了一个字段，前端会立马报错需要添加新增的字段，这样能避免很多问题。目录就是存放公共的声明文件前后端一起用的前后端只需要把这个common项目安装到前后端项目即可第二个考虑为什么不用现成的模板呢所以综合考虑就自己干了 本来想跟群友一起搞的但是那时候缺米后来还是一个人承包了微服务设计网关层设计因为微服务太多了api地址各不相同，我想着是入口统一设计了网关层，然后通过网关层分发到各个微
2025-03-07 17:42:57
1518
9
原创 React第二十八章(css modules)
因为React没有Vue的Scoped，但是React又是SPA(单页面应用)，所以需要一种方式来解决css的样式冲突问题，也就是把每个组件的样式做成单独的作用域，实现样式隔离，而css modules就是一种解决方案，但是我们需要借助一些工具来实现，比如webpackpostcsscss-loadervite等。
2025-01-30 14:52:26
1868
2
原创 React第二十七章(Suspense)
Suspense 是一种异步渲染机制，其核心理念是在组件加载或数据获取过程中，先展示一个占位符（loading state），从而实现更自然流畅的用户界面更新体验。
2025-01-28 21:29:06
1904
原创 React第二十六章(createPortal)
注意这是一个API，不是组件，他的作用是：将一个组件渲染到DOM的任意位置，跟Vue的Teleport组件类似。
2025-01-27 23:05:49
1277
原创 React第二十五章(受控组件/非受控组件)
受控组件一般是指表单元素，表单的数据由React的 State 管理，更新数据时，需要手动调用setState()方法，更新数据。因为React没有类似于Vue的v-model，所以需要自己实现绑定事件。
2025-01-25 19:09:02
1311
原创 React第二十四章(自定义hooks)
因为在实际开发中，React的内置hooks并不能满足我们所有的需求，比如一些复杂的业务逻辑，或者是一些使用场景，需要我们自己来使用自定义hooks实现。自定义hooks必须以use开头自定义hooks可以调用其他hooks(内置的hooks和自定义的hooks)我们并不需要重复的造轮子，已经有很多现成的库可以使用，比如ahooksreact-useSWR等等，这些库都是经过社区验证的，可以放心使用。这里使用ahooks 举例。
2025-01-22 12:49:54
1310
原创 React第二十二章(useDebugValue)
下面通过实现一个useCookieHook 来展示的实际应用。这个 Hook 提供了完整的 cookie 操作功能，并通过来增强调试体验。${]*)(;() => {updateCookie('update-value') } } > 设置cookie < / button > < button onClick = {() => {deleteCookie() } } > 删除cookie < / button > < / div >);=([^;]*)(;
2025-01-15 10:09:20
1107
原创 React第二十一章(useCallback)
useCallback的使用需要有所节制，不要盲目地对每个方法应用useCallback，这样做可能会导致不必要的性能损失。useCallback本身也需要一定的性能开销。useCallback并不是为了阻止函数的重新创建，而是通过依赖项来决定是否返回新的函数或旧的函数，从而在依赖项不变的情况下确保函数的地址不变。
2025-01-02 05:28:18
1338
原创 React第二十章(useMemo)
使用场景当子组件接收的 props 不经常变化时当组件重新渲染的开销较大时当需要避免不必要的渲染时优点通过记忆化避免不必要的重新渲染提高应用性能减少资源消耗注意事项不要过度使用，只在确实需要优化的组件上使用对于简单的组件，使用memo的开销可能比重新渲染还大如果 props 经常变化，memo的效果会大打折扣使用场景当需要缓存复杂计算结果时当需要避免不必要的重新计算时当计算逻辑复杂且耗时时优点通过记忆化避免不必要的重新计算提高应用性能减少资源消耗注意事项。
2024-12-31 03:09:55
1472
原创 React第十九章(useContext)
useContext 提供了一个无需为每层组件手动添加 props，就能在组件树间进行数据传递的方法。设计的目的就是解决组件树间数据传递的问题。
2024-12-15 09:09:27
1178
1
原创 一个落魄程序员的2024年终总结
在年前的时候在错误的地点认识了一个女孩，因为她也是山西的，并且比我小两岁，我觉得挺合适的，她也心动了，我还想起来第一天见面的时候意犹未尽，你也心有灵犀的说了这句话，我还记得你给我转的520，你是第一个愿意给我花钱的女生，挑礼物也只挑最便宜的，我还记得我们逛了那么久，你就只要了10元的发卡，吃了一个13元的鸡翅包饭，还是两个人吃一个，喝奶茶也是两个人喝一个，住的旅馆也是挑最便宜的，你总说我骗你，但我从来没骗过你。
2024-12-14 18:00:53
2391
12
原创 React第十八章(useImperativeHandle)
可以在子组件内部暴露给父组件句柄，那么说人话就是，父组件可以调用子组件的方法，或者访问子组件的属性。如果你学过Vue，就类似于Vue的。
2024-12-09 06:43:34
1048
原创 React第十六章(useLayoutEffect)
是 React 中的一个 Hook，用于在浏览器重新绘制屏幕之前触发。与 useEffect 类似。
2024-11-21 02:06:17
1018
1
原创 React第十五章(useEffect)
useEffect 是 React 中用于处理副作用的钩子。并且useEffect 还在这里充当生命周期函数，在之前你可能会在类组件中使用 componentDidMount、componentDidUpdate 和 componentWillUnmount 来处理这些生命周期事件。
2024-11-13 14:26:56
1205
原创 React第十四章(useDeferredValue)
useDeferredValue 用于延迟某些状态的更新，直到主渲染任务完成。这对于高频更新的内容（如输入框、滚动等）非常有用，可以让 UI 更加流畅，避免由于频繁更新而导致的性能问题。
2024-11-06 08:55:30
815
原创 React第十三章(useTransition)
是 React 18 中引入的一个 Hook，用于管理 UI 中的过渡状态，特别是在处理长时间运行的状态更新时。它允许你将某些更新标记为“过渡”状态，这样 React 可以优先处理更重要的更新，比如用户输入，同时延迟处理过渡更新。
2024-11-02 11:06:37
1845
1
原创 React第十二章(useSyncExternalStore)
我们实现一个useStorage Hook，用于订阅 localStorage 数据。这样做的好处是，我们可以确保组件在 localStorage 数据发生变化时，自动更新同步。实现代码我们将创建一个 useStorage Hook，能够存储数据到 localStorage，并在不同浏览器标签页之间同步这些状态。此 Hook 接收一个键值参数用于存储数据的键名，还可以接收一个默认值用于在无数据时的初始化。/*** @param key 存储到localStorage 的key。
2024-10-29 11:34:47
1953
1
原创 React第十一章(useReducer)
useReducer是React提供的一个高级Hook,没有它我们也可以正常开发，但是useReducer可以使我们的代码具有更好的可读性，可维护性。useReducer跟useState一样的都是帮我们管理组件的状态的，但是呢与useState不同的是useReducer是集中式的管理状态的。
2024-10-21 14:51:48
1912
2
Vue3最新源码分享。
2022-02-03
project.zip
2021-09-20
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人