Signal ledger / technical archive

Notes arranged as an authored archive, not a conventional blog feed.

React, JavaScript, rendering, and frontend architecture organized as a continuing ledger of implementation notes, tradeoffs, and technical positions.

Lead storyArticle

从零配置Macbook Pro 2024

介绍如何从零配置 Macbook Pro。最终配置完成时是前端开发的必要环境，以及配好常用工具。

Secondary ledger

49 more notes

Notes2024-10-22

《Refactoring UI》笔记

1. 从零开始细节稍后处理当开始构思一个产品时，优先考虑产品的功能实现，而不是产品的界面交互。在设计好功能之前，过早的开始设计界面会导致很多的困扰。在早期的设计阶段，应该尽量简单、高效的设计功能界面，例如忽略字体、阴影等细节样式，使用现实中的画笔或者 PRD 工具制作简单的原型图，并尽量不要使用色彩来...

Article2024-08-27

React Query 全能指南

什么是 React Query React Query 是一个用于管理服务器状态的库，它可以帮助我们轻松地获取、缓存、更新和删除服务器状态。如何理解 useQuery 和 useMutation useQuery 的返回值用于界面显示，并对该返回值进行缓存。而 useMutation 则用于手动触发，并提...

React2024-06-05

从 React 19 重新理解 React 设计理念

React Team 在2024年4月25日发布了《React 19 RC》文章，文章中介绍了 React 19 的更新内容，结合 React 的编程理念让我们来看看 React 希望开发者如何理解界面渲染。

Infra2023-11-29

patterns.dev 笔记

https://www.patterns.dev/ 设计模式 Singleton Pattern 单例模式通过全局变量控制类只会被实力化一次，且通过使实例对象不可变。 Observer Pattern 观察者模式通过观察者将需要监听的方法添加到事件队列，并在触发时依次调用观察者方法。 Proxy Pa...

React2023-06-27

React 源码：Ref

关于 Ref 的一切

Node Js2023-05-25

企业 Node.js BFF 应用基础架构

一个企业 Node.js BFF 应用应当具有哪些特性及能力？

Typescript2023-05-11

TypeScript 类型编程基础

TypeScript 类型不仅可以声明类型，也能描述任何可计算逻辑，比如循环、条件判断、计算等语言能力。对此，称之为类型编程。

Javascript2023-05-08

Promise 完全解析

Promise API 解读及如何实现

Article2023-05-06

Web Animation 网页动画

网页动画简史及现代网页动画技术简介

Infra2023-04-12

微前端技术点探秘

探索微前端技术点的实现原理

Induction: Rust

进入 Rust 的世界

Article2023-03-17

如何搭建可维护的组件库

前言业界目前有很多组件库的建设方案，从代码到文档都有很多现成的工具可以使用。本文将介绍建设组件库需要的技术点，并提供合适的示例。 1. 适合的代码组织方案首先，在搭建组件库之前，应当明确一个大致的组件路线。因为基础组件已经有了很多优秀的开源库可以选用，大多数企业组件库都是基于某一开源组件库进一步开发需要...

Typescript2023-03-15

TypeScript × React

Props 优先使用声明组件 Props，用户可以在需要的时候轻易的拓展 Props。当满足不了或需要限制用户扩展的情况下，使用 type 声明。不要在 Function Component 中使用，直接设置。不使用，通过解构赋值实现默认值设置。 Hooks useState: 可以推导类型，...

Infra2023-02-07

浏览器基本原理

全面理解浏览器基本原理

React2022-12-07

Hooks 源码：useId

useId 和它的一切。

Library2022-12-06

插件系统的设计

前端库的插件系统应该如何设计

React2022-08-23

Before you memo() 的原理

本文增加了对 https://overreacted.io/before you memo/ 的源码解释原文总结原始代码中 B 组件有重操作，在更新 A 组件时，导致了 B 的重新渲染，从而导致了页面卡顿。在 before you memo 这篇文章中，作者提供了几个解决没有耦合的组件之间如何避免重复...

React2022-07-22

Virtual DOM 和 Diff 解读

理解 Virtual DOM 和 Diff 算法

Build Tool2022-07-12

Vite 原理简析

了解 vite 主要功能源码

Article2022-06-30

如何阅读 ECMAScript 标准

通过例子了解如何阅读 ECMAScript 规范

Build Tool2022-05-12

Webpack 简明指南

了解 Webpack 的基本原理及特性实现

Threejs2022-05-01

Three.js 完全入门指南 🚧 WIP

了解 Three.js 基本概念

Infra2022-04-24

Redux 源码解读

Redux 的源码解读

State management

React2022-04-24

React Redux 源码解析

React Redux 源码解析

React2022-04-23

JSX 与 React

概念当编写一个 React 组件或应用时，首先就是新建一个文件，并在文件中编写代码我们将包含这种代码的文件格式称之为 JSX。 JSX 用于描述 React 代码的 DOM 结构，代码结构与 HTML 类似，但又有很多不同，如支持内嵌 JavaScript 代码。对于 React 来说，上述 JSX...

React2022-04-23

React性能优化指南

React 函数式组件的性能优化的手段与相关原理

React2022-03-16

React 的 Reconciliation 阶段

reconciliation 阶段做了哪些事情

React2022-03-07

React Suspense

Notes on frontend systems, rendering, and implementation tradeoffs.

React2022-01-27

React SyntheticEvent

合成事件

Article2022-01-24

designable 技术总结

designable

React2022-01-16

React优先级调度：Scheduler

React 如何控制不同优先级的调度

Infra2021-12-23

@formily/reactive 源码解析

从了解 @formily/reactive 源码洞悉 reactive 的原理

Article2021-12-09

黑话手册

这些看不明白的词都是什么？

React2021-12-07

React 中的位运算

位运算在 React 中的实践

Infra2021-12-03

前端应该掌握的Linux命令

Linux 命令整理

React2021-11-11

React 状态更新

如何触发 React 中的状态更新，如何将更新提交给页面渲染

React2021-11-02

Fiber 概念

Fiber 的理解及源码浅析

React2021-11-02

【目录】React source code

深入 React 源码阅读推荐

React2021-08-15

React 优先级控制：Lane

React 异步渲染中的优先级

React2021-08-02

Hooks 源码：useEffect, useLayoutEffect

useEffect 和它的一切。

React2021-07-23

React 的 Commit 阶段

React 的 commit 阶段详解

React2021-07-16

Hooks 源码：useContext

createContext 生成了什么，useContext 是如何监听 Context 里的值的。

React2021-07-16

Hooks 源码：useMemo

useMemo 和它的一切。

React2021-07-13

Hooks 源码：useCallback

useCallback 和它的一切。

React2021-07-11

理解 hooks 基础

hooks 以什么样的形态存在于 React 中？

React2021-04-01

Hooks 源码：useDeferredValue

useDeferredValue 和它的一切。

React2021-03-18

Hooks 源码：useRef

useRef 和它的一切。

React2021-03-18

Hooks 源码：useState, useReducer

useState, useReducer 和它的一切。

React2021-03-18

Hooks 源码：useTransition

useTransition 和它的一切。

Archive note

This ledger tracks frontend systems, rendering behavior, and implementation choices as designed notes rather than chronological blog drops.

Read the lead, move through the ledger, and treat each post as part of a continuing technical publication.