<?xml version="1.0" encoding="utf-8" ?><rss version="2.0"><channel><title><![CDATA[chenlmw的博客]]></title><description><![CDATA[]]></description><link>https://blog.youkuaiyun.com/chenlmw</link><language>zh-cn</language><generator>https://blog.youkuaiyun.com/</generator><copyright><![CDATA[Copyright &copy; chenlmw]]></copyright><item><title><![CDATA[面试官冷笑一声：原型链怎么实现继承？你答得出来吗？]]></title><link>https://blog.youkuaiyun.com/chenlmw/article/details/147959872</link><guid>https://blog.youkuaiyun.com/chenlmw/article/details/147959872</guid><author>chenlmw</author><pubDate>Wed, 14 May 2025 17:54:53 +0800</pubDate><description><![CDATA[原型链是 JavaScript 中实现继承的核心机制，通过 __proto__ 和 prototype 属性，对象可以沿着原型链查找属性和方法。每个对象都有一个 __proto__ 指向其原型，而构造函数则通过 prototype 属性为实例对象提供共享的属性和方法。原型链的查找流程是从对象自身开始，逐级向上查找，直到找到属性或到达 null。JavaScript 通过原型链实现继承，常见的继承方式包括原型链继承和寄生组合式继承，后者通过构造函数继承属性和 Object.create 复用原型方法，解决了共]]></description><category></category></item><item><title><![CDATA[Promise / async 都看过无数遍了，你真的能写出来吗？]]></title><link>https://blog.youkuaiyun.com/chenlmw/article/details/147834172</link><guid>https://blog.youkuaiyun.com/chenlmw/article/details/147834172</guid><author>chenlmw</author><pubDate>Fri, 09 May 2025 17:44:14 +0800</pubDate><description><![CDATA[📌 本文是《前端打怪笔记》系列第 2 篇，适合用于：**面试复习 / 代码输出 / 系统掌握异步机制**。

从实际异步问题出发，带你理解 `Promise` 的设计思想，并**手写一个支持链式调用的 Promise 类**，真正吃透异步原理。]]></description><category></category></item><item><title><![CDATA[事件循环讲了 100 遍，这次你终于能真的搞懂了]]></title><link>https://blog.youkuaiyun.com/chenlmw/article/details/147800645</link><guid>https://blog.youkuaiyun.com/chenlmw/article/details/147800645</guid><author>chenlmw</author><pubDate>Thu, 08 May 2025 18:25:35 +0800</pubDate><description><![CDATA[事件循环几乎是前端人绕不过的坎，但也总是似懂非懂。看了 5 张不同的流程图刷了 3 遍教学视频背过“宏任务和微任务”规则和setTimeout谁先执行？究竟属于哪类任务？和谁优先？脑子还是“嗡”的一下。这篇文章就是为了让你真正理解，而不是记答案。]]></description><category></category></item><item><title><![CDATA[Vue 人眼中的 React Router：从 router-view 到 Outlet，原来这么玩！]]></title><link>https://blog.youkuaiyun.com/chenlmw/article/details/147772168</link><guid>https://blog.youkuaiyun.com/chenlmw/article/details/147772168</guid><author>chenlmw</author><pubDate>Wed, 07 May 2025 18:53:41 +0800</pubDate><description><![CDATA[这个实战项目实现了：路由集中配置、嵌套路由、编程式导航、动态参数传递以及获取、路由守卫、声明式跳转。麻雀虽小，五脏俱全哈~Vue 更倾向于集中式配置与隐式结构注入；React Router 强调显式组合、组件优先、Hooks 驱动；从路由配置、导航跳转，到嵌套结构、懒加载、权限控制，React Router 提供了一个更灵活但也更自由的生态。如果你是 Vue 开发者，这篇文章相信能让你在理解差异的基础上，快速掌握 React Router 的使用方式和设计理念。]]></description><category></category></item><item><title><![CDATA[React 弹窗还能这样封装？高质量 Modal 的进阶指南来了！]]></title><link>https://blog.youkuaiyun.com/chenlmw/article/details/147743737</link><guid>https://blog.youkuaiyun.com/chenlmw/article/details/147743737</guid><author>chenlmw</author><pubDate>Tue, 06 May 2025 17:20:36 +0800</pubDate><description><![CDATA[弹窗写得溜，组件封装不犯愁！趁着五一假期前还有点空，我们再把 Modal 升个级…]]></description><category></category></item><item><title><![CDATA[React 弹窗还能这样写？手撸一个高质量 Modal 玩起来！]]></title><link>https://blog.youkuaiyun.com/chenlmw/article/details/147617808</link><guid>https://blog.youkuaiyun.com/chenlmw/article/details/147617808</guid><author>chenlmw</author><pubDate>Tue, 29 Apr 2025 18:51:27 +0800</pubDate><description><![CDATA[用了这么久 React，是时候自己封装个组件玩玩了。这次我们不讲虚的，从 0 开始动手写一个 Modal，支持受控、Portal 挂载等功能，写完你绝对能吹。]]></description><category></category></item><item><title><![CDATA[面试官：受控组件都分不清？还敢说自己写过 React？]]></title><link>https://blog.youkuaiyun.com/chenlmw/article/details/147566800</link><guid>https://blog.youkuaiyun.com/chenlmw/article/details/147566800</guid><author>chenlmw</author><pubDate>Sun, 27 Apr 2025 19:07:11 +0800</pubDate><description><![CDATA[面试官冷冷一笑，盯着我手里的简历。

“你说你写过 React 项目？”
“是的。”

“那……受控组件和非受控组件，讲讲。”

我心头一震，表面淡定地微笑，脑子却飞快回想起那些我曾无数次敲下的 `value`、`onChange`、`ref.current`……]]></description><category></category></item><item><title><![CDATA[面试官让我渲染10万条数据？看我用 React 虚拟列表轻松搞定]]></title><link>https://blog.youkuaiyun.com/chenlmw/article/details/147490346</link><guid>https://blog.youkuaiyun.com/chenlmw/article/details/147490346</guid><author>chenlmw</author><pubDate>Thu, 24 Apr 2025 19:19:38 +0800</pubDate><description><![CDATA[虚拟列表“只渲染可视区域 + 少量缓冲区内容”，不该看的，统统不渲染！想象你有一个能装1000本书的大书架，但是你的房间只有一面墙那么大的窗户（屏幕），每次只能看到10本书。笨办法：把1000本书全都摆到窗户后面，但每次只能看到10本，其他990本白占地方还浪费体力（内存和性能）聪明办法：只在窗户后面放15本书（多放5本备用），当你要往下看时，快速把后面的书往前挪，同时补充新书（动态渲染）每次滑动，只需替换这 15 本即可 —— 这就是虚拟列表的核心思想。🚀定高虚拟列表。]]></description><category></category></item><item><title><![CDATA[Vue 人如何玩转 React 自定义 Hook？从 Mixins 到 Hook 的华丽转身]]></title><link>https://blog.youkuaiyun.com/chenlmw/article/details/147428393</link><guid>https://blog.youkuaiyun.com/chenlmw/article/details/147428393</guid><author>chenlmw</author><pubDate>Tue, 22 Apr 2025 19:01:20 +0800</pubDate><description><![CDATA[在 Vue 中，我们曾经依赖 mixin 来实现逻辑复用，它简洁、方便，但在大型项目中也暴露出种种问题：变量来源不明、命名冲突、逻辑耦合……

本文将带你从 Vue 的角度出发，理解自定义 Hook 的设计理念，并通过实战演示其强大之处，帮助你完成从 mixin 到 Hook 的思维跃迁。]]></description><category></category></item><item><title><![CDATA[Vue 人看 useReducer：比 useState 更强的状态管理利器！]]></title><link>https://blog.youkuaiyun.com/chenlmw/article/details/147400256</link><guid>https://blog.youkuaiyun.com/chenlmw/article/details/147400256</guid><author>chenlmw</author><pubDate>Mon, 21 Apr 2025 18:45:42 +0800</pubDate><description><![CDATA[useReducer是 React 中一把处理复杂状态的利器，尤其适合逻辑多、状态依赖强的场景。对 Vue 用户来说，它就像是 React 版的 Vuex，用起来既熟悉又顺手。如果你在用useState管状态用得头大，不妨试试useReducer，真的会上瘾！希望这篇文章能帮你快速掌握useReducer重学 React系列！]]></description><category></category></item><item><title><![CDATA[React 性能优化三剑客实战：告别无效重渲染！]]></title><link>https://blog.youkuaiyun.com/chenlmw/article/details/147337764</link><guid>https://blog.youkuaiyun.com/chenlmw/article/details/147337764</guid><author>chenlmw</author><pubDate>Fri, 18 Apr 2025 17:47:34 +0800</pubDate><description><![CDATA[useContext虽然让跨层级传参变得优雅，但它对性能的副作用常常被忽视：只要value的引用发生变化，所有消费它的组件都会无差别更新，哪怕这些组件并未使用发生变化的那部分值。useMemo 保持 value 稳定：避免不必要的引用变化；memo 缓存消费组件：提升组件重用率，减少重渲染；组件职责拆分：精细控制渲染粒度，配合memo更高效。当这三种策略协同配合时，能最大化发挥 React 的性能潜力，实现真正意义上的按需渲染。希望这篇文章能帮你更深入理解useContext重学 React系列。]]></description><category></category></item><item><title><![CDATA[Vue 人快上车！用 useContext 实现 Vuex 同款全局状态管理！]]></title><link>https://blog.youkuaiyun.com/chenlmw/article/details/147311227</link><guid>https://blog.youkuaiyun.com/chenlmw/article/details/147311227</guid><author>chenlmw</author><pubDate>Thu, 17 Apr 2025 18:07:33 +0800</pubDate><description><![CDATA[作为一个 Vue 转 React 的前端，我们早就习惯了使用 Vuex 来管理全局状态，什么 state、mutation、action 一套操作下来玩得贼熟练。但在 React 中，我们没有 Vuex 了，要怎样去进行状态管理呢？]]></description><category></category></item><item><title><![CDATA[Vue 人看 useMemo：别再滥用它做性能优化]]></title><link>https://blog.youkuaiyun.com/chenlmw/article/details/147283596</link><guid>https://blog.youkuaiyun.com/chenlmw/article/details/147283596</guid><author>chenlmw</author><pubDate>Wed, 16 Apr 2025 18:09:26 +0800</pubDate><description><![CDATA[对 Vue 开发者来说，初见 `useMemo` 很容易以为它就是 React 版的 `computed`，但真相可能让你大吃一惊：它**不是**响应式的魔法工具，也**不是**你随手就该加的性能“神器”。]]></description><category></category></item><item><title><![CDATA[Vue 人看 React useRef：它不只是替代 ref]]></title><link>https://blog.youkuaiyun.com/chenlmw/article/details/147255612</link><guid>https://blog.youkuaiyun.com/chenlmw/article/details/147255612</guid><author>chenlmw</author><pubDate>Tue, 15 Apr 2025 18:18:20 +0800</pubDate><description><![CDATA[如果你是从 Vue 转到 React 的开发者，初见 `useRef` 可能会想：这不就是 React 版的 `ref` 吗？但真相是 —— 它能做的，比你想象得多得多。]]></description><category></category></item><item><title><![CDATA[Vue 人转 React 必踩的 useEffect 坑，我来填平了]]></title><link>https://blog.youkuaiyun.com/chenlmw/article/details/147230657</link><guid>https://blog.youkuaiyun.com/chenlmw/article/details/147230657</guid><author>chenlmw</author><pubDate>Mon, 14 Apr 2025 18:58:09 +0800</pubDate><description><![CDATA[如果你刚从 Vue 进入 React 世界，useEffect可能是你最容易踩坑的 Hook。它看起来像 Vue 的生命周期函数，实际却大不相同。你是不是也遇到过这些疑惑？“它到底是mounted还是updated的替代？“为什么我的副作用逻辑会无限触发？“依赖项到底该不该加？加了它就炸，不加它报错？别急，这篇文章我会从运行时机、依赖项、清除机制到常见陷阱，逐一帮你搞清楚useEffect的使用姿势。]]></description><category></category></item><item><title><![CDATA[Vue 开发者看过来！一文吃透 React 的 useState]]></title><link>https://blog.youkuaiyun.com/chenlmw/article/details/147152581</link><guid>https://blog.youkuaiyun.com/chenlmw/article/details/147152581</guid><author>chenlmw</author><pubDate>Fri, 11 Apr 2025 18:58:59 +0800</pubDate><description><![CDATA[作为 Vue 转 React 的前端，我刚开始接触 `useState` 时踩了不少坑。这篇文章我会用尽量通俗的方式，帮你彻底掌握它的用法和原理！]]></description><category></category></item><item><title><![CDATA[#揭秘Vue3源码之computed：懒计算与缓存机制全解析]]></title><link>https://blog.youkuaiyun.com/chenlmw/article/details/146979227</link><guid>https://blog.youkuaiyun.com/chenlmw/article/details/146979227</guid><author>chenlmw</author><pubDate>Thu, 03 Apr 2025 13:41:30 +0800</pubDate><description><![CDATA[在这个瞬息万变的前端世界里，你是否曾好奇：那些高性能的交互和流畅的用户体验背后，到底隐藏着怎样的“黑科技”？本文将带你深入探秘最新的计算属性computed源码实现，从底层逻辑到实际应用案例，全面揭开技术背后的神秘面纱。无论你是初学者还是资深开发者，都将在这里发现全新的思维方式，激发你无限的创意灵感，助你在技术的道路上再创高峰！]]></description><category></category></item><item><title><![CDATA[Vue3源码：5个问题带你读懂watch]]></title><link>https://blog.youkuaiyun.com/chenlmw/article/details/146401042</link><guid>https://blog.youkuaiyun.com/chenlmw/article/details/146401042</guid><author>chenlmw</author><pubDate>Thu, 20 Mar 2025 16:47:26 +0800</pubDate><description><![CDATA[在Vue3的中，watch被广泛使用，无论是在表单监听、数据同步，还是监听路由变化，watch都是Vue开发中不可或缺的工具。它的作用是在每次响应式状态发生改变时触发回调函数。这篇文章将带着5个疑问带你深入理解watch源码。watchcbwatchdeep: truerefoldValuenewValuejobwatch带着上面5个问题，我们进入源码中进行调试，看看watch是如何运行的，本文参考源码版本为。]]></description><category></category></item><item><title><![CDATA[5 分钟掌握 TypeScript 结构化类型系统，一次搞懂鸭子类型！]]></title><link>https://blog.youkuaiyun.com/chenlmw/article/details/146210392</link><guid>https://blog.youkuaiyun.com/chenlmw/article/details/146210392</guid><author>chenlmw</author><pubDate>Wed, 12 Mar 2025 17:29:46 +0800</pubDate><description><![CDATA[你是否遇到过这样的情况：明明传了一个「看似不对」的类型TS居然不报错？这！不！科！学！😱这不是TypeScript的 bug，而是一个精心设计的特性——结构化类型（Structural Typing），江湖人称鸭子类型这个看似「随意」的机制，其实是TypeScript灵活性的核心密码。为什么两个毫无关系的类可以互相赋值？怎么避免「长得像」的类型意外兼容？]]></description><category></category></item><item><title><![CDATA[Vue3源码解析之nextTick：拯救“数据变了但 DOM 还没反应过来”的尴尬场面]]></title><link>https://blog.youkuaiyun.com/chenlmw/article/details/146042347</link><guid>https://blog.youkuaiyun.com/chenlmw/article/details/146042347</guid><author>chenlmw</author><pubDate>Wed, 05 Mar 2025 14:24:53 +0800</pubDate><description><![CDATA[我们将深入剖析 Vue3 中的一个重要工具——nextTick。你可能已经在项目中多次使用过它，但是否真正理解它的工作原理？它是如何在异步更新 DOM 的过程中发挥作用的？它是如何与 Vue3 的响应式系统配合工作的？这些问题的答案，正是我们今天要揭开的谜底。通过这篇文章，你将不仅仅了解nextTick的基础用法，更会深入理解它的工作原理、底层实现以及应用场景。]]></description><category></category></item></channel></rss>