洋葱的博客

原创 Plugin 原理

钩子的本质就是：事件。为了方便我们直接介入和控制编译过程，webpack 把编译过程中触发的各类关键事件封装成事件接口暴露了出来。hooks（钩子）。开发插件，离不开这些钩子。

原创 Loader原理

webpack 会先从左到右执行 loader 链中的每个 loader 上的 pitch 方法（如果有），然后再从右到左执行 loader 链中的每个 loader 上的普通 loader 方法。由于同步计算过于耗时，在 Node.js 这样的单线程环境下进行此操作并不是好的方案，我们建议尽可能地使你的 loader 异步化。webpack 会跳过后面所有的的 pitch 和 loader，直接进入上一个 loader。默认情况下，资源文件会被转化为 UTF-8 字符串，然后传给 loader。

原创 Webpack 高级

原创 Babel

原创 Eslint

1、parserOptions解析选项。2、rules具体规则。3、extends继承。

原创 处理字体图标资源

原创 处理图片资源

原创 处理样式资源

注：需要下来两个loader注意：下载两个。

原创 Webpack 基本介绍

在项目根目录下新建文件：webpack.config.jsWebpack是基于Node.js运行的，所以采用Common.js模块化规范。

原创 Router6

一、<Routes/>与<Route/>八、useSearchParams()六、useNavigate()九、useLocation()五、useRoutes()七、useParams()三、<Navigate>十、useMatch()二、<NavLink>四、<Outlet>

原创 React 扩展

一、setState。二、lazyLoad。四、Fragment。

原创 React 路由

4 .< App>的最外侧包裹了一个<BrowserRouter>或<HashRouter>3.展示区写Route标签进行路径的匹配。2.导航区的a标签改为Link标签。1.明确好界面中的导航区、展示区。四、解决多级路径刷新页面样式丢失问题。五、路由的严格匹配和模糊匹配。六、Redirect的使用。二、路由组件和一般组件。三、Switch的使用。

原创 React的代理配置

3.工作方式:上述方式配置代理,当请求了3000不存在的资源时,那么该请求会转发给5000(优先匹配前端资源)在src下创建配置文件:src/setupProxy.js。1.优点:配置简单,前端请求资源时可以不加任何前缀。1.优点:可以配置多个代理,可以灵活的控制请求是否走代理。2.缺点:配置繁琐,前端请求资源时必须加前缀。2.缺点:不能配置多个代理。在package.json中追加如下配置。1.第一步:创建代理配置文件。

原创 生命周期（新）

3、componentWillUnmount:做一些收尾工作，如：清理定时器。2、componentDidMount:开启监听，发送ajax请求。1、render：初始化渲染或更新渲染调用。

原创 生命周期（旧）

一般在这个钩子中做一些初始化的事,例如:开启定时器、发送网络请求、订阅消息。1. componentWillUnmount()===== > 常用。4.componentDidMount () ===> 常用。2. 更新阶段:由组件内部this.setSate()或父组件render触发。一般在这个钩子中做一些收尾的事,例如:关闭定时器、取消订阅消息。1. 初始化阶段:由ReactDOM.render()触发 --- 初次渲染。3.render() ====>必须。

原创 JS 隐式转换和显示转换

一、隐式转换二、显示转换。

原创 state

2、组件被称为“状态机”，通过更新组件的state来更新对应的页面显示（重新渲染组件）a. 强制绑定this：通过函数对象的bind()2）组件定义的方法中this为undefined，如何解决？1）组件中render方法中的this为组件实例对象。3）状态数据，不能直接修改或更新。1、state是组件对象最重要的属性，值是对象。

原创 函数式组件和类式组件

一、函数式组件二、类的复习三、类式组件。

原创 jsx语法

JSX语法核心规则：1）虚拟DOM不写引号；2）JS表达式用{}包裹；3）类名使用className；4）内联样式格式为style={{key:value}}；5）单根标签限制；6）强制标签闭合；7）首字母大小写区分元素和组件。这些规则确保JSX正确转换为React元素，需严格遵循以避免错误。

原创 CSS3 BFC

原创 CSS3 响应式布局

一、媒体类型二、媒体特性三、运算符。

原创 CSS3 伸缩盒模型

一、伸缩容器、伸缩项目。五、flex-flow。十、flex复合属性。

原创 CSS3 2D变换

一、2D位移二、缩放三、旋转四、扭曲五、多重变换六、变换原点。

原创 CSS3 新增渐变

一、线性渐变二、径向渐变。

原创 CSS3 新增文本属性

一、文本阴影二、文本换行三、文本溢出四、文本修饰。

原创 CSS3 新增边框属性

一、边框圆角。

原创 CSS3 新增背景属性

一、background-origin。二、background-clip。三、background-size。四、background复合属性。

原创 CSS3 新增盒子属性

一、box-sizing怪异盒模型。二、resize调整盒子大小。

原创 CSS3 新增长度单位

原创 CSS定位的特殊应用

原创 CSS 定位

一、相对定位二、绝对定位三、固定定位四、粘性定位五、定位层级。

原创 CSS 浮动

对兄弟元素的影响：后面的兄弟元素，会占据浮动元素之前的位置，在浮动元素的下面；对父元素的影响：不能撑起父元素的高度，导致父元素高度塌陷；但父元素的宽度依然束缚浮动的元素。4、方案四：在所有浮动元素的最后面，添加一个块级元素，并给该块级元素设置clear：both。5、方案五：给浮动元素的父元素，设置伪元素，通过伪元素清楚浮动，原理与方案4相同（推荐使用）2、不管浮动前是什么元素，浮动后：默认宽和高都是被内容撑开，而且可以设置宽高。布局中的一个原则：设置浮动的时候，兄弟元素要么全都浮动，要么全都不浮动。

原创 CSS 行内块的幽灵空白问题

方案一：给行内块设置vertical，值不为baseline就行，设置为middel、bottom、top都可。方案三：给父元素设置font-size：0。如果该行内块内部还有文本，则单独设置font-size。行内块元素与文本的基线对齐，而文本的基线与文本最底端之间是有一定距离的。方案二：若父元素中只有一张图片，设置图片为display:block。

原创 CSS 元素之间的空白问题

方案二：给父元素设置font-size：0，再给需要显示文字的元素设置字体大小。行内元素、行内块元素，彼此之间的换行会被浏览器解析为一个空白字符。方案一：去掉换行和空格（不推荐）

原创 CSS布局小技巧

原创 CSS 样式的继承

原创 CSS 隐藏元素的方式

默认属性值为show，如果设置为hidden，元素会隐藏。彻底地隐藏，不但看不见，也不占用任何位置，没有大小宽高。元素看不见了，还占有原来的位置（元素大小依然保持）设置display：none，就可以让元素隐藏。一、visibility属性。二、display属性。

原创 CSS margin问题

第一个子元素的上margin会作用于父元素上，最后一个子元素的下margin会作用于父元素上。上面兄弟元素的下外边距和下面兄弟的上外边距会合并，取一个最大的值，而不是相加。无需解决，布局的时候上下兄弟元素，只给一个设置上下外边距就可以了。方案三：给父元素设置css样式：overflow：hidden。方案二：给父元素设置宽度不为0的border。方案一：给父元素设置不为0的padding。二、margin合并问题。一、margin塌陷。

原创 CSS盒子模型

3、rem：相对根字体大小，html标签就是根。2、em：相对元素font-size的倍数。注： CSS中设置长度，必须加单位，否则样式无效。4、%：相对父元素计算。

原创 CSS 三大特性

important > 行内样式 > ID选择器 > 类选择器 > 元素选择器 > * > 继承的样式。概念：如果发生了样式冲突，就会根据一定的规则（选择器优先级），进行样式的层叠。概念：元素会自动拥有其父元素、或祖先元素上所设置的某些样式。常见的可继承属性，参照MDN网站，可查询属性是否可被继承。规则：优先继承离得近的。详细来说：需要计算权重。