React 源码文件结构
顶层目录 除去配置文件和隐藏文件夹，根目录的文件夹包括三个： ^5cfbe9 这里我们关注packages目录 packages目录 react (opens new window)文件夹 React的核心，包含所有全局 React API，如： React.createElement React.Compone…
Read articleThe archive
The Journal
Notes on frontend development, engineering, and everyday ideas. Find a subject and start reading.
React 状态更新
React 状态更新 流程概览 类比分支管理的心智模型 在React中，通过ReactDOM.createBlockingRoot和ReactDOM.createRoot创建的应用会采用并发的方式更新状态。 高优更新（红色节点）中断正在进行中的低优更新（蓝色节点），先完成render - commit流程。 待高…
Read articlerender 阶段流程
总览 同异步更新调用不同的方法，performSyncWorkOnRoot或performConcurrentWorkOnRoot，他们唯一的区别是是否调用shouldYield shouldYield终止循环、取决于浏览器帧剩余时间 Fiber Reconciler是从Stack Reconciler重构而来，…
Read article构建工具应该包含哪些能力？
源码转义 支持TypeScript 支持 JavaScript 高级语法（ES2022） 压缩（模块、语句合并） Tree Shaking 常量标志（比如 process\.env\.NODEENV 、Vite import\.meta\.env\.的处理） 图片压缩、转换（imagemin） SVG压缩（svg…
Read articleAtomics API
Atomics API
Read articleJSDoc 初探：代码内的文档标记
JSDoc 3 是一个用于 JavaScript 的API文档生成器，类似于 Javadoc 或 phpDocumentor。可以将文档注释直接添加到源代码中。JSDoc 工具将扫描你的源代码并为您生成一个 HTML 文档网站（当然，即使你不进行生成，其也被大部分浏览器所识别和支持）。JSDoc 的目的是记录 J…
Read articleLocalStorage/sessionStorage 封装 - 基于TypeScript
实际上社区已经有非常成熟的库了，可以轻量化引入并使用store2，当然，我们这篇文章分享日常简单or局部使用时的简单封装。 我们经常需要在 localStorage 或者 sessionStorage 去持久化存储值，但是 localStorage 和 sessionStorage 提供的 api 在处理对象的时…
Read articleSet，Map 和 Array的区别
Set 集合 todo Map 字典 Map 对象保存键值对，并且能够记住键的原始插入顺序。任何值（对象或者原始值）都可以作为一个键或一个值。 特征 Map 对象这种数据结构和和对象类型，都已键值对的形式存储数据，即 key-vlue 形式。 Map 对象存储的数据是有序的，而我们平常使用的对象是无序的，所以通常…
Read articleTone.js —— Web Audio 框架中文使用指南
Tone.js 是一个Web Audio框架，用于在浏览器中创建交互式音乐。Tone.js旨在使音乐家和基于Web Audio 应用程序的音频程序员都能熟悉应用。在应用层，Tone.js 提供了常见的DAW(数字音频工作站)功能，如用于同步和调度事件的全局传输，以及预构建的合成器和音效。此外，Tone.js 提供…
Read articleWeb Audio API - BiquadFilterNode简单低阶滤波器食用指南
BiquadFilterNode 接口表示一个简单低阶滤波器（双二阶滤波器），通过 AudioContext.createBiquadFilter() 方法创建。 这个节点拥有一个输入和输出,一个节点可以设置很多不同的滤波效果，例如让某段频率以下的声音通过什么的(低通). 属性 #### BiquadFilter…
Read articleenquirer 指南
安装 npm 安装: yarn 安装: 使用 问答题 使用 enquirer 的最简单方法是将问题对象传递给该prompt方法。 await（需要在 async 函数内部运行） 遇到多个问题，可以将多个问题对象以数组形式传给prpmpt方法，返回完整的答案对象。 问题对象类型 运行查询器的不同方法 1.通过导入特…
Read articleESLint
LintStaged
Read articleNo matching articles
Try another keyword or reset your filters.