<?xml version="1.0" encoding="utf-8" ?><rss version="2.0"><channel><title><![CDATA[洋葱的博客]]></title><description><![CDATA[]]></description><link>https://blog.youkuaiyun.com/lcc187</link><language>zh-cn</language><generator>https://blog.youkuaiyun.com/</generator><copyright><![CDATA[Copyright &copy; lcc187]]></copyright><item><title><![CDATA[Plugin 原理]]></title><link>https://blog.youkuaiyun.com/lcc187/article/details/158125492</link><guid>https://blog.youkuaiyun.com/lcc187/article/details/158125492</guid><author>lcc187</author><pubDate>Mon, 16 Feb 2026 10:53:16 +0800</pubDate><description><![CDATA[钩子的本质就是：事件。为了方便我们直接介入和控制编译过程，webpack 把编译过程中触发的各类关键事件封装成事件接口暴露了出来。hooks（钩子）。开发插件，离不开这些钩子。]]></description><category></category></item><item><title><![CDATA[Loader原理]]></title><link>https://blog.youkuaiyun.com/lcc187/article/details/158097884</link><guid>https://blog.youkuaiyun.com/lcc187/article/details/158097884</guid><author>lcc187</author><pubDate>Sun, 15 Feb 2026 20:05:16 +0800</pubDate><description><![CDATA[webpack 会先从左到右执行 loader 链中的每个 loader 上的 pitch 方法（如果有），然后再从右到左执行 loader 链中的每个 loader 上的普通 loader 方法。由于同步计算过于耗时，在 Node.js 这样的单线程环境下进行此操作并不是好的方案，我们建议尽可能地使你的 loader 异步化。webpack 会跳过后面所有的的 pitch 和 loader，直接进入上一个 loader。默认情况下，资源文件会被转化为 UTF-8 字符串，然后传给 loader。]]></description><category></category></item><item><title><![CDATA[Webpack 高级]]></title><link>https://blog.youkuaiyun.com/lcc187/article/details/158066857</link><guid>https://blog.youkuaiyun.com/lcc187/article/details/158066857</guid><author>lcc187</author><pubDate>Sat, 14 Feb 2026 10:04:53 +0800</pubDate><description><![CDATA[]]></description><category></category></item><item><title><![CDATA[Babel]]></title><link>https://blog.youkuaiyun.com/lcc187/article/details/158040090</link><guid>https://blog.youkuaiyun.com/lcc187/article/details/158040090</guid><author>lcc187</author><pubDate>Sat, 14 Feb 2026 08:08:38 +0800</pubDate><description><![CDATA[]]></description><category></category></item><item><title><![CDATA[Eslint]]></title><link>https://blog.youkuaiyun.com/lcc187/article/details/158039820</link><guid>https://blog.youkuaiyun.com/lcc187/article/details/158039820</guid><author>lcc187</author><pubDate>Fri, 13 Feb 2026 15:00:41 +0800</pubDate><description><![CDATA[1、parserOptions解析选项。2、rules具体规则。3、extends继承。]]></description><category></category></item><item><title><![CDATA[处理字体图标资源]]></title><link>https://blog.youkuaiyun.com/lcc187/article/details/158036323</link><guid>https://blog.youkuaiyun.com/lcc187/article/details/158036323</guid><author>lcc187</author><pubDate>Fri, 13 Feb 2026 09:53:32 +0800</pubDate><description><![CDATA[]]></description><category></category></item><item><title><![CDATA[处理图片资源]]></title><link>https://blog.youkuaiyun.com/lcc187/article/details/158035804</link><guid>https://blog.youkuaiyun.com/lcc187/article/details/158035804</guid><author>lcc187</author><pubDate>Fri, 13 Feb 2026 09:13:16 +0800</pubDate><description><![CDATA[]]></description><category></category></item><item><title><![CDATA[处理样式资源]]></title><link>https://blog.youkuaiyun.com/lcc187/article/details/158035496</link><guid>https://blog.youkuaiyun.com/lcc187/article/details/158035496</guid><author>lcc187</author><pubDate>Fri, 13 Feb 2026 09:03:20 +0800</pubDate><description><![CDATA[注：需要下来两个loader注意：下载两个。]]></description><category></category></item><item><title><![CDATA[Webpack 基本介绍]]></title><link>https://blog.youkuaiyun.com/lcc187/article/details/158035460</link><guid>https://blog.youkuaiyun.com/lcc187/article/details/158035460</guid><author>lcc187</author><pubDate>Fri, 13 Feb 2026 08:16:44 +0800</pubDate><description><![CDATA[在项目根目录下新建文件：webpack.config.jsWebpack是基于Node.js运行的，所以采用Common.js模块化规范。]]></description><category></category></item><item><title><![CDATA[Router6]]></title><link>https://blog.youkuaiyun.com/lcc187/article/details/157737221</link><guid>https://blog.youkuaiyun.com/lcc187/article/details/157737221</guid><author>lcc187</author><pubDate>Wed, 04 Feb 2026 21:13:39 +0800</pubDate><description><![CDATA[一、<Routes/>与<Route/>八、useSearchParams()六、useNavigate()九、useLocation()五、useRoutes()七、useParams()三、<Navigate>十、useMatch()二、<NavLink>四、<Outlet>]]></description><category></category></item><item><title><![CDATA[React 扩展]]></title><link>https://blog.youkuaiyun.com/lcc187/article/details/157612626</link><guid>https://blog.youkuaiyun.com/lcc187/article/details/157612626</guid><author>lcc187</author><pubDate>Sun, 01 Feb 2026 14:08:22 +0800</pubDate><description><![CDATA[一、setState。二、lazyLoad。四、Fragment。]]></description><category></category></item><item><title><![CDATA[React 路由]]></title><link>https://blog.youkuaiyun.com/lcc187/article/details/157359176</link><guid>https://blog.youkuaiyun.com/lcc187/article/details/157359176</guid><author>lcc187</author><pubDate>Sun, 25 Jan 2026 20:00:32 +0800</pubDate><description><![CDATA[4 .< App>的最外侧包裹了一个<BrowserRouter>或<HashRouter>3.展示区写Route标签进行路径的匹配。2.导航区的a标签改为Link标签。1.明确好界面中的导航区、展示区。四、解决多级路径刷新页面样式丢失问题。五、路由的严格匹配和模糊匹配。六、Redirect的使用。二、路由组件和一般组件。三、Switch的使用。]]></description><category></category></item><item><title><![CDATA[React的代理配置]]></title><link>https://blog.youkuaiyun.com/lcc187/article/details/157223197</link><guid>https://blog.youkuaiyun.com/lcc187/article/details/157223197</guid><author>lcc187</author><pubDate>Wed, 21 Jan 2026 21:47:07 +0800</pubDate><description><![CDATA[3.工作方式:上述方式配置代理,当请求了3000不存在的资源时,那么该请求会转发给5000(优先匹配前端资源)在src下创建配置文件:src/setupProxy.js。1.优点:配置简单,前端请求资源时可以不加任何前缀。1.优点:可以配置多个代理,可以灵活的控制请求是否走代理。2.缺点:配置繁琐,前端请求资源时必须加前缀。2.缺点:不能配置多个代理。在package.json中追加如下配置。1.第一步:创建代理配置文件。]]></description><category></category></item><item><title><![CDATA[生命周期（新）]]></title><link>https://blog.youkuaiyun.com/lcc187/article/details/157098622</link><guid>https://blog.youkuaiyun.com/lcc187/article/details/157098622</guid><author>lcc187</author><pubDate>Sun, 18 Jan 2026 15:51:36 +0800</pubDate><description><![CDATA[3、componentWillUnmount:做一些收尾工作，如：清理定时器。2、componentDidMount:开启监听，发送ajax请求。1、render：初始化渲染或更新渲染调用。]]></description><category></category></item><item><title><![CDATA[生命周期（旧）]]></title><link>https://blog.youkuaiyun.com/lcc187/article/details/157098580</link><guid>https://blog.youkuaiyun.com/lcc187/article/details/157098580</guid><author>lcc187</author><pubDate>Sun, 18 Jan 2026 15:45:22 +0800</pubDate><description><![CDATA[一般在这个钩子中做一些初始化的事,例如:开启定时器、发送网络请求、订阅消息。1. componentWillUnmount()===== > 常用。4.componentDidMount ()  ===> 常用。2. 更新阶段:由组件内部this.setSate()或父组件render触发。一般在这个钩子中做一些收尾的事,例如:关闭定时器、取消订阅消息。1. 初始化阶段:由ReactDOM.render()触发 --- 初次渲染。3.render() ====>必须。]]></description><category></category></item><item><title><![CDATA[JS 隐式转换和显示转换]]></title><link>https://blog.youkuaiyun.com/lcc187/article/details/156914188</link><guid>https://blog.youkuaiyun.com/lcc187/article/details/156914188</guid><author>lcc187</author><pubDate>Tue, 13 Jan 2026 22:10:59 +0800</pubDate><description><![CDATA[一、隐式转换二、显示转换。]]></description><category></category></item><item><title><![CDATA[state]]></title><link>https://blog.youkuaiyun.com/lcc187/article/details/156874048</link><guid>https://blog.youkuaiyun.com/lcc187/article/details/156874048</guid><author>lcc187</author><pubDate>Mon, 12 Jan 2026 22:33:32 +0800</pubDate><description><![CDATA[2、组件被称为“状态机”，通过更新组件的state来更新对应的页面显示（重新渲染组件）a. 强制绑定this：通过函数对象的bind()2）组件定义的方法中this为undefined，如何解决？1）组件中render方法中的this为组件实例对象。3）状态数据，不能直接修改或更新。1、state是组件对象最重要的属性，值是对象。]]></description><category></category></item><item><title><![CDATA[函数式组件和类式组件]]></title><link>https://blog.youkuaiyun.com/lcc187/article/details/156828903</link><guid>https://blog.youkuaiyun.com/lcc187/article/details/156828903</guid><author>lcc187</author><pubDate>Sun, 11 Jan 2026 15:26:22 +0800</pubDate><description><![CDATA[一、函数式组件二、类的复习三、类式组件。]]></description><category></category></item><item><title><![CDATA[jsx语法]]></title><link>https://blog.youkuaiyun.com/lcc187/article/details/156824907</link><guid>https://blog.youkuaiyun.com/lcc187/article/details/156824907</guid><author>lcc187</author><pubDate>Sun, 11 Jan 2026 11:35:49 +0800</pubDate><description><![CDATA[JSX语法核心规则：1）虚拟DOM不写引号；2）JS表达式用{}包裹；3）类名使用className；4）内联样式格式为style={{key:value}}；5）单根标签限制；6）强制标签闭合；7）首字母大小写区分元素和组件。这些规则确保JSX正确转换为React元素，需严格遵循以避免错误。]]></description><category></category></item><item><title><![CDATA[CSS3 BFC]]></title><link>https://blog.youkuaiyun.com/lcc187/article/details/156657914</link><guid>https://blog.youkuaiyun.com/lcc187/article/details/156657914</guid><author>lcc187</author><pubDate>Tue, 06 Jan 2026 22:11:07 +0800</pubDate><description><![CDATA[]]></description><category></category></item></channel></rss>