2024-04-01 Rollup 打包原理与插件 工程化 前端 工程化 插件机制仅仅使用 Rollup 内置的打包能力很难满足项目日益复杂的构建需求。对于一个真实的项目构建场景来说,我们还需要考虑到模块打包之外的问题,比如路径别名(alias) 、全局变量注入和代码压缩等等。可要是把这些场景的处理逻辑与核心的
2024-03-31 Vite双引擎架构 工程化 前端 工程化 这篇文章我们会将目光集中到 Vite 本身的架构上,一起聊聊它是如何站在巨人的肩膀上实现出来的。所谓的巨人,指的就是 Vite 底层所深度使用的两个构建引擎:**Esbuild **和 Rollup Vite 架构图很多人对 Vite 的双
2024-03-29 Vite 配置 工程化 前端 工程化 no-bundle 的理念通过 Vite 初始化的项目,在项目根目录中有一个 index.html 文件,这个文件十分关键。因为 Vite 默认会把项目根目录下的 index.html 作为入口文件。也就是说,当你访问 http://lo
2023-08-25 React Hooks 使用时要避免的6个错误 React 前端 React 今天来看看在使用 React hooks 时的一些坑,以及如何避开这些坑。 问题概览: 不要改变 hooks 的调用顺序; 不要使用旧的状态; 不要创建旧的闭包; 不要忘记清理副作用; 不要在不需要重新渲染时使用 useState;
2023-08-23 React 组件代码结构如何组织? React 前端 React 1. 导入依赖项我们需要在组件文件顶部导入组件所需的依赖项,通常是使用 import 来进行导入。对于不同类别的依赖项,建议对它们进行分组,这有助于帮助我们更好的理解组件。可以将导入的依赖分为四类: 12345678910111213
2023-08-15 React常见错误,如何避免? React 前端 React 下面来分享在 React 开发中常见的一些错误,以及如何避免这些错误。理解这些问题背后的细节,防止犯下类似的错误。 1. 组件卸载后执行状态更新报错信息:Can’t perform a React state update on an
2023-07-28 React 渲染流程 React 前端 React 1. React 渲染流程在说 React 的渲染流程之前,先来看一个在渲染流程中绝对绕不开的概念——协调。 (1)协调协调,在 React 官方博客的原文中是 Reconciler,它的本意是“和解者,调解员”。那协调是怎么跟 R
2023-07-27 React 组件设计模式 React 前端 React 在 React 设计模式中,最重要、也是最为大家所津津乐道的几个模式分别是:● 有状态组件与无状态组件● 高阶组件(HOC)● Render Props 这些形态各异的 React 设计模式虽然实现思路有所不同,但本质上基本都是为了实现
2023-07-27 React 纯函数组件 React 前端 React 1. 纯函数所谓纯函数,它是这样一种函数:即相同的输入,永远会得到相同的输出,而且没有任何可观察的副作用。 从纯函数的定义,可以提取出纯函数的必要条件:● 纯函数接受参数,基于参数计算,返回一个新对象;● 不会产生副作用,计算过程不会
2023-07-26 React组件通信 React 前端 React 在组件之间是存在嵌套关系的,如果我们将一个程序的所有逻辑都放在一个组件中。那么这个组件就会变得臃肿并且难以维护,所以组件化的思想就是对组件进行拆分,再将这些组件嵌套在一起,最终形成我们的应用程序。 比如,下面的组件就存在如下的关系:●