experience Path
经验之谈
从开发现场出发,用通俗的语言讲清常见问题、技术难点和可执行的解决思路。
经验之谈
- 01setState 调用了,页面为什么没变化?
从状态读取、变量作用域、组件边界和异步竞态出发,排查 Flutter 调用 setState 后界面没有按预期更新的问题。
- 02接口回来了,为什么旧数据覆盖了新数据?
解释 Flutter 连续请求中的异步竞态,并用请求版本号正确保护页面数据、加载状态和错误状态。
- 03Row 为什么会溢出?先弄清约束从哪里来
从 Flutter 约束传递和 Row 布局过程出发,理解横向溢出的真正原因,并正确选择 Flexible、Wrap 或滚动方案。
- 04Rebuild 多就一定卡吗?
区分 Flutter 的 Rebuild、Relayout、Repaint、Composite 与 Raster,并用实际测量判断页面卡顿是否真的由重建引起。
- 05“我这里没问题”:如何留下可用的 Flutter 问题现场?
整理 Flutter 问题排查所需的构建信息、复现步骤、日志、堆栈和环境状态,让偶现问题能够被复现、定位和验证。
- 06代码写完不等于交付:Flutter 开发的标准流程
从需求确认、编码、自测、代码评审到灰度发布和线上观察,建立 Flutter 开发任务可验收、可追踪、可回退的交付闭环。
- 07别先画分层图:从工作流看 Flutter 生产架构
从业务运行流与工程交付流出发,理解 Flutter 生产架构如何连接状态、业务规则、数据边界、发布治理和线上观测。
- 08ListView 中一行数据变了,为什么整页都在重建?
解释 Flutter 列表中父级 setState 的重建范围,并说明如何通过状态下沉、按项订阅和稳定身份缩小更新成本。
- 09Key 不是越多越好:什么时候真的需要它?
从 Widget 身份匹配出发,理解 Flutter Key 在列表排序、状态重置、位置保存和 GlobalKey 场景中的正确用法。
- 10弹窗关闭后更新页面,为什么经常遇到 mounted 问题?
从 showDialog 的异步返回、页面与弹窗的独立生命周期出发,说明每个 await 后为什么都要重新确认 mounted。
- 11App 切到后台后,哪些任务不能想当然地继续运行?
从计时、轮询、网络、数据保存和 Isolate 出发,说明 Flutter App 进入后台后任务为何可能暂停、延迟或丢失。
- 12页面反复进入退出后越来越卡,先检查哪些资源?
从 dispose、重复监听、Controller、Timer、Stream 和原生插件资源出发,排查 Flutter 页面反复进入后的卡顿与内存增长。
- 13连点两次搜索,怎样避免后返回的旧请求覆盖结果?
用搜索场景说明请求去重、latest-wins、取消和请求版本号如何配合,并通过可控异步测试验证旧响应不会覆盖新结果。
- 14Future.wait 中一个请求失败,其他请求会怎样?
讲清 Future.wait 的默认错误时机、eagerError、剩余任务、cleanUp,以及全量成功、部分成功和取消策略。
- 15网络重试不是多调几次:哪些请求可以安全重试?
从瞬时故障、HTTP 幂等语义、写请求幂等键和退避预算出发,判断 Flutter 网络请求何时可以自动重试。
- 16Token 过期后多个接口同时刷新,如何避免重复刷新?
用 single-flight 合并并发 Token 刷新,并处理 401 重放、刷新失败、账号切换和不可重放请求等工程边界。
- 17大图加载导致内存上涨,应该先观察哪些指标?
从图片像素、ImageCache、Dart Heap 和进程内存四个层面判断大图加载是正常峰值、缓存增长还是资源泄漏。
- 18页面“感觉卡”,第一步应该测什么?
先把模糊的卡顿感受拆成可复现的时间窗口,再根据滚动、点击响应或页面加载选择正确指标。
- 19Repaint 和 Rebuild 不是一回事
从 Element 与 RenderObject 的职责出发,讲清 Rebuild、Repaint 的触发关系、独立发生场景和 RepaintBoundary 的适用边界。
- 2060 Hz 与 120 Hz 屏幕,帧预算有什么不同?
解释不同刷新率下的理论帧预算、UI 与 Raster 流水线,以及高刷新率设备上的正确测量方式。
- 21CPU、GPU、内存问题,如何先做方向判断?
通过 UI 与 Raster 帧、CPU 采样、Dart Heap 和进程内存,快速判断 Flutter 性能问题的优先排查方向。
- 22Android 正常、iOS 异常,排查时先找哪些平台差异?
从输入环境、系统权限、网络策略、生命周期、沙箱 UI 和插件原生实现入手,定位 Flutter 跨平台差异。
- 23技术债不是“以后再改”:怎样记录才真的有人处理?
把 Flutter 项目中的技术债记录成有影响、有触发条件、有负责人和验收标准的可执行事项。
- 24发版后指标变差,怎样判断是否由本次改动引起?
通过指标校验、版本分组、发布时序、Trace 和受控止损,判断 Flutter 新版本是否造成线上指标回退。
flutter Path
Flutter 工程实践
深入 Flutter 框架原理、状态与数据流、性能、架构、安全和工程治理。
框架原理
- 01Flutter 三棵树协作机制:从 Widget 配置到屏幕像素
深入理解 Widget、Element、RenderObject 的职责,以及挂载、更新复用、布局和绘制的完整协作链路。
- 02Flutter 混合开发技术详解
系统梳理 Flutter Add-to-App 的工程结构、Engine 管理、路由通信、插件生命周期和性能边界。
- 02Flutter 应用生命周期:状态切换、可靠保存与进程恢复
系统理解 AppLifecycleState、WidgetsBindingObserver、前后台资源治理、进程终止与 Flutter 状态恢复机制。
- 03Flutter 原生视图与混合工程:Platform View、Texture 与 Add-to-App
深入理解 AndroidView、UiKitView、Texture、Android 合成模式,以及 Add-to-App 中 Engine、路由、生命周期和性能治理。
音视频与多媒体
- 01Flutter 音视频架构:播放状态机、Texture、缓存、DRM 与采集
系统理解 Flutter 音视频播放和采集链路,覆盖播放器状态机、首帧、缓冲、Seek、后台播放、音频焦点、多清晰度、DRM、相机与录制。
性能与稳定性
- 01Flutter 性能优化:从指标、定位到工程实践
从帧流水线和量化指标出发,系统定位 Build、Layout、Paint、Raster、内存与启动性能问题。
- 02Flutter 客户端监控体系:从异常发现到问题闭环
设计覆盖崩溃、ANR、启动、卡顿、网络和业务指标的 Flutter 客户端监控与告警闭环。
- 02Flutter 启动性能:从冷启动、TTID/TTFD 到首屏依赖治理
拆解 Flutter 从系统进程、Engine、插件和 Dart 初始化到首帧与业务可交互的完整链路,并给出测量、优化和回归方法。
- 03Flutter 客户端 Trace 与稳定性治理:从链路追踪到灰度、降级和复盘
用 Trace Context、Span、SLO 和错误预算连接 Flutter 客户端链路追踪、灰度、降级与故障治理。
- 04Flutter 异常处理体系:从捕获、转换到恢复
覆盖同步、Future、Stream、Framework、Isolate、Platform Channel 与原生异常的分层处理体系。
渲染与绘制
- 01Flutter 帧流水线:从 VSync 调度到屏幕呈现
拆解 Flutter 一帧在 Framework、Engine 与 GPU 之间的完整链路,解释 Frame Callback、Build、Layout、Paint、Compositing 和 Raster 的边界与性能诊断方法。
- 02Flutter Painting:从 Canvas 绘制到 CustomPainter 交互与语义
深入 PaintingContext、Canvas、Paint、Path、Clip、Transform 与 DisplayList,并通过可交互图表讲清 CustomPainter 重绘、命中测试和 Semantics。
- 03Flutter Layer 与合成:从 Layer Tree 到保留式渲染
深入 Flutter Layer Tree、常见 Layer 类型、Framework 与 Engine 合成边界,并讲清 Retained Rendering、Raster Cache、Layer 复用及合成成本。
- 04Flutter 渲染性能:从 saveLayer、滤镜到 Skia 与 Impeller
系统分析 RepaintBoundary、saveLayer、Opacity、BackdropFilter、ImageFilter、Clip、阴影与 Shader 卡顿,并建立 Skia、Impeller 和图形 API 的验证方法。
- 05Flutter 自定义渲染:从 RenderBox 到 RenderSliver
系统讲解 SingleChildRenderObjectWidget、MultiChildRenderObjectWidget、RenderBox、RenderSliver、ParentData、属性更新和三类渲染脏标记。
状态与数据流
- 01Flutter 状态设计:从状态分类到可验证的 UI 状态机
从状态所有权与生命周期出发,讲清单一事实源、派生状态、状态提升与下沉、不可变快照、Sealed UI 状态机和副作用治理。
- 02Flutter Provider:从 InheritedWidget 原理到生命周期与性能
深入 Provider 的依赖传播、MultiProvider、ChangeNotifierProvider、FutureProvider、StreamProvider、ProxyProvider、read/watch/select、生命周期、测试与工程边界。
- 03Flutter Riverpod:Provider 图、生命周期与异步状态工程实践
系统讲解 Riverpod 的 ProviderContainer、Ref、Provider 类型、autoDispose、family、刷新、Override、Observer,以及异步竞态、测试和性能边界。
- 04Flutter BLoC 与响应式架构:事件、状态、并发与副作用
深入讲解 Cubit、BLoC、Event、State、BlocBuilder、BlocListener、BlocSelector、事件并发策略,以及 UI 状态与副作用分离。
- 05Flutter 状态管理其他方案:Redux、MobX、GetX、Signals 与迁移选型
横向分析 Redux、MobX、GetX 与 Signals 的运行模型、生命周期、性能和测试边界,并给出状态管理选型、渐进迁移、调试与追踪方法。
Dart 语言与运行时
- 01Dart 运行时详解:从 Kernel IR、JIT/AOT 到对象分配与垃圾回收
系统理解 Dart 代码在 Flutter 中如何编译、加载和执行,以及热重载、Tree Shaking、对象分配、分代垃圾回收与闭包捕获的工程边界。
工程架构
- 01Flutter 模块化架构:从单体项目到可治理的业务边界
从业务边界、公共 API 和依赖方向出发,构建可测试、可治理、可渐进迁移的 Flutter 模块化架构。
- 02Flutter 依赖注入:对象组装、生命周期与可测试性
理解依赖注入、Composition Root、对象 Scope 与资源所有权,并比较 Flutter 常用 DI 方案的边界。
- 03Flutter 国际化与本地化:从 ARB 到多语言工程治理
使用 Locale、gen_l10n 和 ARB 构建 Flutter 多语言能力,并治理复数、格式、RTL、字体与翻译流程。
- 03Flutter 分层架构:从页面堆叠到可演进的业务边界
以订单提交链路讲清 Presentation、Application、Domain、Data 的职责、依赖方向、模型转换、错误边界与架构裁剪。
网络与请求治理
- 01Flutter 请求治理:去重、竞态、重试、Token 刷新与熔断
系统设计 Flutter 网络请求的去重、竞态控制、幂等重试、Token single-flight 刷新、离线重放、限流与熔断。
客户端安全
- 01Flutter 输入与链接安全:Deep Link、WebView 与不可信数据边界
从不可信输入边界出发,保护 Deep Link、WebView、JavaScript Bridge、文件和系统权限调用。
- 02Flutter 客户端安全:从威胁建模到工程防护
围绕客户端不可信前提,建立凭证、存储、日志、设备完整性、供应链与事件响应的纵深防御。
ios Path
iOS 技术专栏
深入 Swift、UIKit、SwiftUI、系统运行机制、架构、性能、安全与 App 工程治理。
iOS 工程实践
- 01Swift 编译管线:从 Source、SIL 到机器码与增量构建
系统理解 Swift Source、AST、SIL、LLVM IR、机器码与模块产物的关系,并分析增量编译、WMO、LTO、Debug/Release 和 Xcode Build Settings 的工程边界。
- 02Swift 类型与调用派发:从静态调用、Witness Table 到 Existential
系统理解 Swift Static、Virtual 与 Objective-C Message Dispatch,分析 Witness Table、Protocol Witness、泛型特化、Existential Container、Metadata 及 ABI 与模块稳定性。
- 03Objective-C Runtime:从 isa、消息派发到 KVC、KVO 与 Swift 互操作
系统理解 Objective-C Runtime 的对象与 Class 模型、Selector、IMP、消息发送、方法缓存、Category、Associated Object、Swizzling、KVC/KVO 及 Swift 互操作边界。
- 04Mach-O 与动态链接:从 Header、符号绑定到代码签名与崩溃符号化
系统理解 iOS Mach-O Header、Load Command、Segment、Section、符号表、静态与动态库、Framework、XCFramework、dyld、代码签名、ASLR、dSYM 和符号化。
- 05iOS 应用启动:从进程创建、dyld 到首帧与可交互
系统理解 iOS Process Creation、dyld Loading、Runtime Initialization、main、UIApplicationMain、App/Scene Delegate、SwiftUI App、冷热启动及首帧测量。
- 06iOS 应用生命周期:从 App、Scene 状态到挂起、恢复与终止
系统理解 iOS App State、Scene State、多窗口、前后台切换、Background Time、Suspension、Termination、State Restoration、内存警告和 Protected Data。
- 07UIKit 视图与控制器:从 View Hierarchy、Containment 到转场与布局边界
系统理解 UIView、UIViewController、视图层级、控制器容器、Presentation、Navigation、Trait Collection、Safe Area、Layout Guide 和 Appearance 生命周期。
- 08iOS 沙盒与系统边界:从容器、Entitlement 到扩展进程与数据保护
系统理解 iOS App Sandbox、Bundle/Data Container、App Group、Entitlement、Capability、Extension Process、XPC、Keychain Access Group、File Protection 与 Privacy Manifest。
- 09UIKit 事件与响应链:从 Hit Testing、手势识别到键盘与焦点协调
系统理解 UIKit Run Loop 输入、Touch Delivery、Hit Testing、Gesture Recognizer、Responder Chain、Target-action、First Responder、Keyboard、Pointer、Focus 与事件冲突。
- 10UIKit Auto Layout:从约束方程、优先级到 Self-sizing 与性能诊断
系统理解 Auto Layout 约束方程、Intrinsic Content Size、Hugging、Compression Resistance、Priority、布局歧义与冲突、Layout Pass、自适应 Cell 和性能调试。
- 11UIKit 列表与数据源:从 Cell 复用、Diffable Snapshot 到大数据集性能
系统理解 UITableView、UICollectionView、Cell Reuse、Prefetching、Diffable Data Source、Snapshot Identity、Compositional Layout、批量更新、自适应尺寸、图片取消和滚动状态。
- 12SwiftUI 声明式模型:从 View 值、Identity 到环境与生命周期边界
系统理解 SwiftUI View 值描述、Structural/Explicit Identity、View Tree、Environment、Modifier、Result Builder、Conditional Content 及可见性生命周期。
- 13SwiftUI 状态与数据流:从所有权、Observation 到异步竞态治理
系统理解 SwiftUI @State、@Binding、@Environment、Observation、@Observable、StateObject/ObservedObject、单一事实源、派生状态、初始化重建和异步竞态。
- 14SwiftUI 更新与布局:从依赖跟踪、Transaction 到 Proposal-Response 协议
系统理解 SwiftUI Dependency Tracking、Body Evaluation、Diffing、Transaction、Layout Proposal、Size Response、Alignment、Preference、Geometry、动画事务和无效更新定位。
- 15SwiftUI 导航与 UIKit 互操作:从路由状态、深链恢复到 Representable 生命周期
系统理解 NavigationStack、NavigationPath、Typed Destination、Deep Link、Sheet、State Restoration、UIViewRepresentable、UIViewControllerRepresentable、Coordinator、生命周期同步与渐进式迁移。
- 16Core Animation:从 Layer Tree、Transaction 到 Render Server
系统理解 Core Animation 的 Layer Tree、Model/Presentation Layer、Transaction、隐式与显式动画、Layout/Display/Commit、Render Server、离屏渲染、光栅化、Mask/Shadow/Blend 及动画中断一致性。
- 17iOS 图形与媒体:从 ImageIO、Core Image 到 Metal 显示管线
系统理解 Core Graphics、Core Image、Metal、Texture、Command Buffer、Display Link、ImageIO、Color Space、HDR 与 Wide Color、像素尺寸与逻辑尺寸,以及 GPU Capture。
- 18iOS 帧性能:从刷新率、Render Loop 到 Hitch 诊断
系统理解屏幕刷新率、60/120 Hz 帧预算、Main Thread、Render Loop、CPU/GPU 瓶颈、Hitch、Commit 延迟、滚动与动画卡顿,以及 Instruments 真机验证方法。
- 19GCD 与 Run Loop:从队列调度、事件循环到死锁诊断
系统理解 Serial/Concurrent Queue、Main Queue、Sync/Async、QoS、Dispatch Group、Semaphore、Barrier、Dispatch Source、Run Loop Mode、Timer、Deadlock 与 Priority Inversion。
- 20Swift Concurrency:从结构化任务树到取消与异步序列
系统理解 async/await、Structured Concurrency、Task Tree、Child Task、Task Group、Unstructured/Detached Task、Cancellation、Task Priority、Continuation 与 AsyncSequence。
- 21Swift Actor 隔离:从数据竞争安全到重入竞态治理
系统理解 Actor、MainActor、Global Actor、Isolation Domain、Sendable、Data Race Safety、Reentrancy、nonisolated、跨隔离调用、Objective-C 回调桥接及编译语言模式差异。
- 22iOS 并发工程实践:从取消、防抖到 Single-flight 与竞态测试
以搜索、提交和鉴权请求为主线,系统讲解 MainActor UI 隔离、协作式取消、搜索防抖、重复提交治理、Token 刷新合并、Actor 重入、Continuation 与 Callback 桥接、并发测试及 Thread Sanitizer。
- 23iOS URL Loading System:从 URLSession 到缓存、认证与后台传输
系统理解 URLSession、URLRequest、URLSessionTask、Delegate、Session Configuration、连接复用、HTTP/2 与 HTTP/3 协商、URLCache、Cookie、Authentication Challenge 和 Background Transfer。
- 24iOS 请求治理:从 API Client 分层到重试、幂等与离线一致性
以生产级 API Client 为主线,系统讲解 Request Builder、Response Validation、Typed Error、Retry 与 Backoff、Idempotency、Timeout、Cancellation、Token Refresh Single-flight、Rate Limit 及弱网离线治理。
- 25iOS 安全传输:从 ATS、TLS 信任到请求签名与抗重放
系统理解 App Transport Security、TLS、Trust Evaluation、Certificate Pinning、Client Certificate、Secret 管理、日志脱敏、Replay Attack、Request Signing 与 Network Extension 的工程边界。
- 26iOS 本地存储选择:从 UserDefaults、Keychain 到 SQLite 与 SwiftData
围绕数据规模、查询模式、安全等级、生命周期和迁移成本,系统比较 UserDefaults、文件系统、Keychain、SQLite、Core Data、SwiftData 与缓存,并给出工程选型和验证方法。
- 27iOS Core Data 与 SwiftData:对象图、上下文、并发与历史追踪
系统理解 Core Data 与 SwiftData 的 Model、Persistent Store、Context、Object Identity、Faulting、Fetch、Relationship、Save、Merge Policy、Concurrency、Batch Operation 和 Persistent History。
- 28iOS 数据迁移与一致性:从 Schema 演进到离线同步与损坏恢复
系统讲解 Schema Version、Lightweight/Custom Migration、Atomic Write、Transaction、Conflict Resolution、Cache Invalidation、Offline-first、Optimistic Update、Sync State Machine 与数据损坏恢复。
- 29iOS 分层与依赖设计:从业务边界到 Composition Root
系统讲解 Presentation、Domain、Data、Dependency Rule、Repository、Use Case、Dependency Injection、Composition Root、Module Boundary、Public API 与循环依赖治理。
- 30iOS UI 架构模式:从 MVC、MVVM 到 UDF、TCA 与 VIPER
以同一业务场景比较 MVC、MVVM、Coordinator、Redux/UDF、TCA 概念和 VIPER,系统讲解状态所有权、副作用、导航状态、测试替身与团队复杂度成本。
- 31iOS 状态建模:从 Impossible State 到异步一致性
以订单提交场景系统讲解 Domain State、View State、状态生命周期、状态机、Derived State、Event、Command、Reducer、异步结果过期以及乐观更新与回滚。
react Path
React 技术专栏
深入 React 渲染机制、Hooks、状态与数据流、性能、服务端渲染和大型前端工程治理。
React 工程实践
- 01JavaScript 执行模型:从执行上下文、闭包到 ESM 与 Tree Shaking
系统理解 JavaScript 执行上下文、词法环境、作用域链、闭包、this、原型链与属性描述符,并分析 ESM、CommonJS、模块作用域和 Tree Shaking 的工程边界。
- 02JavaScript Event Loop 与异步:从任务调度到取消、竞态和并发控制
系统理解浏览器 JavaScript 的 Call Stack、Task、Microtask、Promise、async/await、Timer、DOM Event 和 Fetch 生命周期,并掌握 AbortController、异步竞态、有界并发与 Web Worker。
- 03TypeScript 类型系统:从结构类型、类型推断到 React 运行时边界
系统理解 TypeScript 的结构类型、类型推断、联合与交叉、泛型、条件类型、映射类型、模板字面量类型、类型收窄与型变,并掌握 React 工程中的断言边界和运行时校验。
- 04React 声明式 UI:从 State 映射到组件身份与状态保留
系统理解 React 声明式 UI 模型,区分 Component、React Element、JSX、Props 与 State,并掌握单向数据流、组合、受控与非受控组件以及 Component Identity 的工程边界。
- 05React Render 与 Commit:从更新触发到 DOM、Effect 与浏览器绘制
系统理解 React 更新的 Trigger、Render、Reconciliation 与 Commit 阶段,区分 DOM Mutation、Layout Effect、Passive Effect 和 Browser Paint,并掌握 Render Purity、Strict Mode 与可中断渲染边界。
- 06React Fiber:从双缓冲树、工作循环到 Lanes 与 Bailout
系统理解 Fiber Node、Fiber Root、Current 与 Work-in-progress Tree,以及 beginWork、completeWork、Double Buffering、Lanes、Update Queue、Scheduler、Time Slicing 和 Bailout。
- 07React Reconciliation:从 Element Type、Key 到状态保留与列表移动
系统理解 React Reconciliation 的同层身份匹配,分析 Element Type、Key、列表插入与移动、条件渲染位置、Fragment Key、不稳定 Key 以及 State 保留、重置和重建成本。
- 08React 状态分类:从局部交互到 Server、URL 与 Form State
系统分析 React 中 Ephemeral、Component、Page、Application、Server、URL 与 Form State,建立 Single Source of Truth、Derived State、状态提升与状态下沉的工程决策模型。
- 09React 不可变更新:从引用相等、结构共享到 Immer 边界
系统理解 React State 的 Reference Equality、Shallow Copy 与 Structural Sharing,掌握数组和嵌套对象更新、Normalized State、Immer 使用边界及大对象复制成本。
- 10React UI 状态机:从判别联合到乐观更新与回滚
系统设计 React UI 状态机,覆盖 Idle、Loading、Success、Error、Stale 与 Refreshing,使用 Discriminated Union 消除非法状态,并分离 State、Event、Command、Side Effect、Optimistic State 与 Rollback。
- 11React 组件 API 设计:从 Props、所有权到 Headless 与可访问性契约
系统设计 React 组件 API,覆盖 Props 最小化、Boolean Trap、Compound Components、Render Props、Headless Components、Controlled State、Slot、Context、Ref、组件所有权与可访问性契约。
- 12React Hooks 运行机制:调用顺序、Hook List、Dispatcher 与闭包快照
从 Fiber、Dispatcher、Hook List 与 Update Queue 解释 React Hooks 如何保存状态,分析调用顺序、闭包快照、Rules of Hooks、Strict Mode 双重调用与自定义 Hook 的工程边界。
- 13React useState 与 useReducer:状态快照、更新队列与 Reducer 设计
系统讲解 React useState 与 useReducer 的 Lazy Initializer、Functional Update、Batching、State Snapshot、Object.is、Reducer Purity、Action 设计与状态重置。
- 14React useEffect:同步外部系统、依赖管理与异步竞态治理
系统讲解 React useEffect 的同步模型、依赖数组、Cleanup、Stale Closure、Race Condition、AbortController、订阅释放、Strict Mode 重执行、Effect 拆分及不需要 Effect 的场景。
- 15React useLayoutEffect 与浏览器绘制:布局测量、Flicker 与同步阻塞
从 React Commit 和浏览器渲染流水线解释 useLayoutEffect,覆盖 DOM Mutation 后执行、Browser Paint 前同步处理、Layout Measurement、阻塞成本、SSR Warning、Flicker 与 requestAnimationFrame。
- 16React Memoization:memo、useMemo、useCallback 与缓存成本模型
系统讲解 React memo、useMemo、useCallback、Reference Stability、依赖比较成本、缓存失效、React Compiler 边界与过度 Memoization,并给出可验证的性能优化流程。
- 17React Ref:DOM 引用、可变逃生口与命令式 API 边界
系统讲解 React useRef、DOM Ref、Mutable Escape Hatch、Callback Ref、Ref Cleanup、forwardRef、Imperative Handle 及 Ref 与 State 的边界,并说明 React 18/19 版本差异。
- 18React 并发渲染:可中断 Render、优先级与原子 Commit
系统讲解 React Concurrent Rendering 的 Interruptible Render、Priority、Lanes、Transition、Urgent 与 Non-urgent Update、Render Restart、Tear-free UI 和 Commit 原子性。
- 19React Transition:非阻塞更新、Pending 状态与异步 Action
系统讲解 React startTransition、useTransition、Pending State、输入响应性、异步 Action 边界、请求乱序、Transition 与防抖的区别,以及与数据请求库的协作方式。
- 20React Deferred Value:陈旧内容、后台渲染与输入响应性
系统讲解 React useDeferredValue、Stale Content、Background Render、Suspense 协作、CPU 密集筛选以及为何 Deferred Value 不替代网络防抖,并给出性能验证与工程边界。
- 21React Suspense:异步边界、Reveal 策略与 Streaming SSR
系统讲解 React Suspense Boundary、Fallback、Reveal Strategy、Nested Boundary、SuspenseList 适用性、Code Splitting、Data Suspense、Error Boundary 和 SSR Streaming。
- 22React Context:传播机制、Value 稳定性与模块边界
系统讲解 React Context 的 Provider、Consumer、传播机制、Value 稳定性、粒度设计、默认值陷阱、模块边界、生命周期与测试替换。
- 23React 外部 Store 协议:useSyncExternalStore、Snapshot 与并发一致性
系统讲解 useSyncExternalStore、Snapshot 缓存、Subscribe 契约、并发渲染一致性、Server Snapshot、Tear 防护和 Store 生命周期。
- 24React 状态管理选型:从 Local State 到 Redux、Zustand、MobX 与 XState
系统比较 React Local State、Context + Reducer、Redux Toolkit、Zustand、MobX、XState 和原子化状态的复杂度、性能、测试与团队约束。
- 25React Redux 工程实践:Store、Middleware、Selector 与 RTK Query
系统讲解现代 Redux Toolkit 的 Store、Reducer、Dispatch、Middleware、Selector、Normalization、Async Thunk、RTK Query、DevTools 与不可变更新。
- 26React 数据请求治理:Fetch、取消、重试、去重与竞态控制
系统讲解 React 数据请求中的 Fetch、AbortController、Request/Response、HTTP Error、JSON Validation、Authentication、Retry、Timeout、请求去重和竞态治理。
- 27React Query Cache:Query Key、Freshness、失效与分页生命周期
系统讲解 Query Cache 的 Query Key、Stale Time、Garbage Collection Time、请求去重、后台刷新、失效、依赖查询、并行查询、分页、无限查询和预取。
- 28React Mutation:乐观更新、幂等提交与冲突治理
系统讲解 React Server State 写操作中的 Mutation State、乐观更新、回滚、缓存失效、幂等键、重复提交、离线 Mutation 和冲突解决。
- 29React Query 与 SWR:Server State 缓存、重新验证与 SSR
对比 TanStack Query 与 SWR 的 Server State 边界、缓存生命周期、Stale-while-revalidate、Suspense、SSR Hydration、错误重试、窗口聚焦与网络恢复刷新。
- 30React 表单状态:受控输入、校验生命周期与可靠重置
系统讲解 React 表单状态中的 Controlled Input、Uncontrolled Input、Default Value、Dirty、Touched、同步与异步校验、跨字段校验、提交状态和重置。
- 31React 表单工程:React Hook Form、Zod、动态字段与草稿治理
系统讲解 React 表单工程中的 React Hook Form、Formik 边界、Schema Validation、Zod、服务端错误映射、动态字段、Field Array、大型表单性能、草稿保存和防重复提交。
- 32React 客户端路由:从 History API 到 Loader、Action 与错误边界
系统讲解 React 客户端路由的 History API、路由匹配、嵌套与布局路由、路径参数、查询参数、导航状态、Loader、Action 和路由错误边界。
- 33React 路由工程:鉴权、深链接、预取与导航竞态治理
系统讲解 React 路由工程中的鉴权守卫、权限控制、深链接、重定向循环、滚动恢复、未保存变更、路由级代码分割、预取和导航竞态。
- 34React 性能方法:从性能预算、Profiler 到可验证回归
系统讲解 React 性能优化的方法论,包括性能预算、用户中心指标、React Profiler、浏览器 Performance 面板、CPU 与网络节流、分位数、单变量实验和性能回归。
- 35React Web Vitals:LCP、INP、CLS 的采集、归因与治理
系统讲解 React 应用中的 LCP、INP、CLS、TTFB、FCP、Field 与 Lab Data、PerformanceObserver、Attribution 和长任务治理。
- 36React 渲染性能:从更新传播、状态边界到 Profiler Flamegraph
系统讲解 React Unnecessary Render、State Colocation、Component Split、Memoization、Stable Props、Context Update、Selector、Expensive Calculation 与 Profiler Flamegraph。
- 37React 列表与大数据:虚拟化、分页、动态高度与 Worker
系统讲解 React 大列表中的 Virtualization、Windowing、Overscan、Dynamic Height、Stable Key、Incremental Rendering、Pagination 和 Worker 计算。
- 38React 资源与网络性能:从代码分割、加载优先级到 CDN 缓存
系统讲解 React 应用的 Code Splitting、Dynamic Import、Bundle Analysis、Preload/Prefetch、图片与字体优化、HTTP Cache、CDN、Compression 和第三方脚本治理。
- 39React 渲染策略:CSR、SSR、SSG、ISR、Streaming SSR 与 Edge Runtime
系统讲解 React 应用的 CSR、SSR、SSG、ISR、Streaming SSR 和 Edge Runtime,分析内容生成时机、缓存、新鲜度、交互、部署成本与工程选型。
- 40React Hydration:从 Server HTML、Mismatch 到 Selective Hydration
系统讲解 React Hydration 的执行模型、hydrateRoot 匹配契约、Hydration Mismatch、Selective Hydration、Event Replay,以及时间、随机数、Locale 和 Browser-only API 治理。
- 41React Server Components:边界、Flight、数据获取与 Server Action
系统讲解 React Server Components 的 Server/Client Boundary、Flight Protocol、数据获取、序列化、Bundle Reduction、Server Function、缓存、安全边界与框架实现。
- 42Next.js App Router 工程实践:路由、缓存、边界与部署运行时
系统讲解 Next.js App Router 的 Layout、Route Handler、Proxy、Metadata、动态渲染、Cache Components、缓存失效、Loading/Error Boundary 与部署运行时。
web3 Path
Web3 技术专栏
从区块链、EVM 和智能合约出发,构建安全、可验证、可观测的 DApp 与链上协议。
Web3 工程实践
- 01Web3 分布式账本:从交易、区块和状态到节点信任模型
系统理解 Web3 分布式账本如何用交易驱动确定性状态转换,区块、P2P 网络与 Gossip 如何传播数据,以及全节点、归档节点、轻客户端和 RPC 节点分别验证什么、信任什么。
- 02Web3 密码学基础:从哈希、Merkle Proof 到数字签名与零知识证明
系统理解 Web3 中哈希函数、Merkle Tree、数字签名、ECDSA、EdDSA、BLS、门限签名、零知识证明和安全随机数分别提供什么安全保证,以及工程实现中的编码、域分离、密钥与验证边界。
- 03Web3 交易与最终性:从 Mempool、Nonce、区块确认到重组处理
系统理解 Web3 交易从构造、签名、广播、Mempool、替换和区块收录,到确认、链重组与最终化的完整生命周期,并建立可回退、可观测的 DApp 交易状态机。
- 04Web3 共识机制:从 PoW、PoS 到分叉选择与最终性
系统理解区块链共识如何在网络延迟和拜占庭节点下协调规范历史,比较 PoW 与 PoS,并拆解 Validator、Proposer、Attestation、Slashing、Fork Choice、Finality Gadget 和 MEV 的边界。
- 05Ethereum 状态模型:从账户、Storage 到三类 Root
系统理解 Ethereum Account-based Model、EOA、Contract Account 与 World State,拆解 Balance、Nonce、Code、Storage 的状态转换,并区分 State Root、Transaction Root 和 Receipt Root。
- 06Ethereum Execution 与 Consensus:双客户端如何协作完成出块和最终化
系统理解 Ethereum Execution Client、Consensus Client、Engine API 与 Beacon Chain 的协作方式,拆解 Slot、Epoch、Validator Duty、Execution Payload、Finality 和 Client Diversity。
- 07Ethereum Gas 机制:从执行成本、EIP-1559 到估算与退款
系统理解 Ethereum Gas Limit、Gas Used、Intrinsic Gas、Base Fee、Priority Fee、Max Fee 和 Block Gas Limit,并掌握 EIP-1559 费用结算、Gas Estimation、Out of Gas、Refund 与 Fee History。
- 08Ethereum RPC:从 JSON-RPC 调用到一致性与多 Provider 治理
系统理解 Ethereum JSON-RPC、eth_call、交易广播、日志查询、Gas 估算与区块标签,并掌握 WebSocket、限流、一致性、多 Provider 故障转移和归档数据治理。
- 09EVM 执行模型:从栈式字节码、调用帧到交易原子性
系统理解 EVM Stack Machine、Opcode、Program Counter 和 Call Frame,拆解 Message Call、Contract Creation、Return/Revert Data、Execution Context 与交易原子性。
- 10EVM 数据区域:从 Stack、Memory、Storage 到 Transient Storage
系统理解 EVM Stack、Memory、Storage、Calldata、Returndata、Code、Transient Storage 与 Logs,拆解 Storage Slot、Memory Expansion、生命周期、复制和回滚边界。
- 11EVM 调用语义:从 CALL、DELEGATECALL 到 CREATE2 与可重入
系统理解 EVM CALL、STATICCALL、DELEGATECALL、CREATE 与 CREATE2,区分 msg.sender、msg.value、tx.origin、调用深度、Gas 转发和 Reentrancy 边界。
- 12EVM ABI:从 Function Selector、动态编码到 Event 与错误数据
系统理解 Ethereum ABI Encoding、静态与动态类型、Tuple、Function Selector、Event Topic、Indexed Parameter、Custom Error、Revert Reason、Packed Encoding 与 Selector Collision。
- 13Solidity 类型系统:从值类型、引用类型到数据位置与复制语义
系统理解 Solidity Value Type、Reference Type、Mapping、Array、Struct、Enum、User-defined Value Type、Address、Fixed-size Bytes、Function Type 与 Data Location。
- 14Solidity 合约结构:从状态、函数入口到继承与 Library
系统理解 Solidity State Variable、Constructor、Function Visibility、Mutability、Modifier、Event、Error、Receive、Fallback、Inheritance、Interface 与 Library 的运行机制和工程边界。
- 15Solidity Storage Layout:从 Slot Packing 到代理升级兼容
系统理解 Solidity Slot Packing、Mapping Slot、Dynamic Array Slot、Struct 与 Inheritance Layout、Constant/Immutable、Storage Pointer、升级兼容和布局检查。
- 16Solidity 编译与部署:从 solc 输入、Bytecode 到可复现验证
系统理解 solc、Source Map、Metadata、Creation/Runtime Bytecode、Constructor Arguments、Library Linking、Contract Verification、Optimizer、viaIR 与 Reproducible Build。
- 17智能合约权限模型:从 Ownable、RBAC 到多签、Timelock 与应急治理
系统理解智能合约 Ownable、RBAC、Multisig、Timelock、Guardian、Pausable、Emergency Action、最小权限、角色轮换与特权操作审计。
- 18智能合约状态机:从合法迁移、超时取消到幂等与不变量
系统理解智能合约 Explicit State、Legal Transition、Terminal State、Timeout、Cancellation、Idempotency、Replay Protection、Pull over Push、Checks-Effects-Interactions 与 Invariant。
- 19智能合约 Upgradeability:从代理模式、存储兼容到升级治理与迁移
系统理解 Immutable Contract、Proxy、Transparent、UUPS、Beacon、Diamond、Initializer、Storage Collision、Implementation Lock、Upgrade Authorization、Timelock Upgrade 与 Migration。
- 20智能合约标准与组合:从 ERC 接口、Token、Vault 到签名与账户抽象
系统理解 ERC Interface、ERC-165、ERC-20、ERC-721、ERC-1155、ERC-2612、ERC-4626、ERC-1271、ERC-2771、ERC-4337 及标准版本与扩展边界。
- 21智能合约常见漏洞:从重入、权限与价格操纵到任意调用和拒绝服务
系统分析 Reentrancy、Cross-function Reentrancy、Access Control、Integer/Precision、Oracle Manipulation、Flash Loan Amplification、Front-running、Sandwich、Signature Replay、Arbitrary Call、Unsafe Delegatecall、DoS、Forced Ether 与 Unchecked Return Value。
- 22智能合约签名安全:从 EIP-191、EIP-712 到 Nonce、合约签名与跨域重放
系统理解 Domain Separation、Chain ID、Contract Binding、Nonce、Deadline、EIP-191、EIP-712、Signature Malleability、Contract Signature 及跨链、跨合约重放。
- 23智能合约 Oracle 安全:从 Spot、TWAP、Staleness 到多源聚合与故障模式
系统理解 Spot Price、TWAP、Medianizer、Staleness、Heartbeat、Decimal、Deviation Threshold、Sequencer Uptime Feed、Multi-source Oracle 与 Failure Mode。
- 24智能合约审计方法:从威胁建模、不变量到 Fuzz、Fork 与修复验证
系统理解 Threat Modeling、Trust Boundary、Invariant、Manual Review、Static Analysis、Symbolic Execution、Fuzzing、Differential Test、Fork Test、Formal Verification、Audit Scope 与 Remediation Verification。
- 25智能合约应急响应:从监控、暂停与密钥泄露到恢复和复盘
系统理解 Monitoring、Pause、Guardian、Timelock Bypass 边界、Key Compromise、Incident Triage、On-chain Communication、User Notification、Fund Recovery 边界与 Postmortem。
- 26Web3 Key Management:从助记词、HD Wallet 到硬件隔离与密钥轮换
系统理解 Seed Phrase、BIP-39、BIP-32、BIP-44、Derivation Path、Keystore、Hardware Wallet、Secure Enclave、备份与密钥轮换边界。
- 27Web3 Wallet Connection:从 EIP-1193、WalletConnect Session 到移动端 Deep Link
系统理解 Injected Provider、EIP-1193、WalletConnect、Session、Namespace、Chain Switching、Account Change、Disconnect、Deep Link 与 Mobile Wallet。
- 28Web3 Transaction Signing:从交易构造、Nonce 与 Gas 到广播、替换和最终确认
系统理解 Legacy Transaction、Typed Transaction、EIP-1559、Nonce Management、Gas Estimation、Simulation、Signing、Broadcast、Replacement、Confirmation 与 Reorg Handling。
- 29Web3 Account Abstraction:从 ERC-4337、EntryPoint 到 Paymaster 与账户恢复
系统理解 Smart Account、EntryPoint、UserOperation、Bundler、Paymaster、Aggregator、Nonce、Session Key、Social Recovery、Gas Sponsorship 与 Validation/Execution。
- 30Web3 Provider 架构:从 Transport、Public Client 到 RPC Quorum 与请求治理
系统理解 Transport、HTTP/WebSocket、Chain Configuration、Public Client、Wallet Client、Signer、Provider Fallback、RPC Quorum、Rate Limit、Retry 与请求去重。
- 31Web3 React 集成:从钱包状态、Query Cache 到交易确认与 Reorg
系统理解 Wallet State、Chain State、Account State、Contract Read/Write、Query Cache、Block-based Invalidation、Optimistic UI、Pending Transaction、Receipt、Reorg 与 Error Boundary。
- 32Web3 交易状态机:从 Draft、签名与 Pending 到 Replacement、Reorg 和 Finality
系统理解 Draft、Simulating、Awaiting Signature、User Rejected、Submitted、Pending、Replaced、Confirmed、Reverted、Reorganized、Finalized 与 Dropped/Unknown。
- 33Web3 DApp UX 与安全:从可读交易、Approval 与 Permit 到钓鱼防护和模拟
系统理解 Human-readable Transaction、Approval Scope、Unlimited Approval、Permit、Network Mismatch、Address Checksum、ENS、Phishing Warning、Signature Preview、Clipboard Risk 与 Transaction Simulation。