myprototypewhat's blog

useMemo 很简单，直接看源码 mountMemo / updateMemo function mountMemo( nextCreate: () => T, deps: Array | void | null ): T { // 创建hook对象 const hook = mountWorkInProgressHook(); const nextDeps = deps === undefined ? null : deps; const nextValue = nextCreate(); hook.memoizedState = [nex

阅读全文 »

* Diff * reconcileChildrenArray * 总结 * lastPlacedIndex Diff 常说的 diff 主要集中在多子节点的更新。 reconcileChildrenArray 先看代码也行，先往下滑看解析也行 function reconcileChildrenArray( returnFiber: Fiber, currentFirstChild: Fiber | null, // 第一个旧子节点 newChildren: Array, lanes: Lanes,

阅读全文 »

useEffect * useEffect * mountEffect / updateEffect * mountEffectImpl / updateEffectImpl * 总结 * pushEffect * 总结 * useEffect 回调什么时候触发呢？ * flushPassiveEffects * flushPassiveEffectsImpl * commitHookEffectListUnmount

深度优先遍历（dfs） const dfs = (node) => { dfs(node.child); console.log(node.value); dfs(node.sibling); }; 广度优先遍历（bfs） const bfs = (node) => { const queue = []; if (node != null) { queue.push(node); while (queue.length > 0) { //出队 const item = queue.shift(); //操作

* useState * 例子 * mountState * mountStateImpl * mountWorkInProgressHook * 总结 * updateState / updateReducer * updateWorkInProgressHook * 总结 * updateReducerImpl * 总结 * dispatchSetState * 总结

Design Token 什么是 Design Token? Design tokens — or tokens, for short — are design decisions, translated into data. They’re ultimately a communication tool: a shared language between design and engineering for communicating detailed information about how to build user interfaces. 它们最终是一种通信工具：设计和工程之间的

前言 名词解释： * JSCore： * JavaScriptCore 是 WebKit 的内置 JavaScript 引擎 * JavaScriptCore 是一个 C++实现的开源项目 * JSCore 的组成部分： * Lexer 词法分析器，将脚本源码分解成一系列的 Token * Parser 语法分析器，处理 Token 并生成相应的语法树 * LLInt 低级解释器，执行 Parser 生成的二进制代码 * Baseline JIT 基线 JIT（``just in time 实施编译） * DFG 低延