标签: analyst

前端工程体系

我常常执着于部分(比如昏天暗地地解读一个源码),不能跳出来看看整体。这篇文章旨在于整理我所理解的前端工程体系,方便逐步演进顶层观念并指导后续发展。因为见识的有限和理解的不足,这篇文章本难免缺陷和差缪,还望有识予以理解。 我所理解的前端工程体系大致如上图。左半部分以 antd + umi、fusion + 飞冰为参照加以说明,组件库用于提供基础的通用组件。模板工程通常提供了应用层面的最佳实践,因此

前端技术汇总贴

下载立即收藏!这应该是你见过的最全前端下载总结 校验身份证号根据〖中华人民共和国国家标准 GB 11643-1999〗中有关公民身份号码的规定,公民身份号码是特征组合码,由十七位数字本体码和一位数字校验码组成。排列顺序从左至右依次为:六位数字地址码,八位数字出生日期码,三位数字顺序码和一位数字校验码。 地址码表示编码对象常住户口所在县(市、旗、区)的行政区划代码。 出生日期码表示编码对象出生的年

react fiber 代码梳理篇

scheduleWork正如 react fiber 搜罗整理篇 已点明的,fiber reconciler 对首次渲染和再次渲染会采用不同的机制。 首次渲染 —— 比如用户侧在浏览器环境调用 ReactDOM.render(rootReactElement, rootDomElement) —— 时,fiber reconciler 首先会通过 createContainer 将根节点 roo

node 命令行工具

命令行工具commander.js、yargs 首先注册命令行参数处理规则,随后通过甄别用户输入(node 环境中的 progress.argv),再从已注册处理规则选取其一应用之。 命令行参数通常被抽象称为子命令、选项。选项部分功能包含设置短标识、默认值、描述,特殊选项为版本号信息。子命令是一类处理操作 action handler 的抽象,其功能包含设置必选参数、可选参数、选项、描述等。选项、

webpack 踩坑录

懒加载Q: 使用 webpack4, @babel/plugin-syntax-dynamic-import 插件后,react-router3 中基于 require.ensure 将不再生效,需要使用如 react-loadable 等加载方式。可参考 react-router的3种按需加载介绍。A: 猜想:webpack 中使用 require.ensure, import() 采用同一套机

react fiber hooks钩子篇

前言本文浅述了 react hooks 的执行机制,但在 expirationTime 优先级处理、suspenseConfig 配置、side-effects 执行机制、useContext、useTransition、useResponder 等方面显得力有不逮,并且未采用图文描述的形式。个中错谬,仍需勘正。 react hooks 的使用可参考 React Hooks的体系设计之一 - 分层

react fiber 类组件状态更新篇

前言本文仅在局部层面上解释类组件的状态更新机制,并没有对函数组件的 hooks、fiber 优先级等作说明。 Update 及 UpdateQueueUpdatefiber reconciler 将 fiber 的状态更新抽象为 Update 单向链表: tag:更新类型,UpdateState、ReplaceState、ForceUpdate、CaptureUpdate payload:状态变

js 事件循环

事件循环基本js 是一门单线程非阻塞脚本语言。即便浏览器推出的 web worker 也只允许子线程承担计算任务,而不能操纵 dom 节点(因为主、子线程同时操纵 dom 会造成不一致)。 执行栈可用于解释 js 引擎对同步脚本的处理。即当函数首次被调用时,js 引擎就会为该过程创建执行上下文,并将该执行上下文压入执行栈中。执行上下文也称为执行环境,包含函数的私有作用域、父级作用域、参数、作用域中

react scheduler 再解析篇

顾名思义,scheduler 用于完成调度工作。 主流程任务队列scheduler 使用 Heap 堆存放任务队列。每个任务在进入 Heap 堆前,会根据 sortIndex、id 属性进行优先级排序。它首先比较 sortIndex 值,值越小,优先级越高;其次以相同的规则比较 id(即比较任务的创建顺序)。依循优先级的高低,scheduler 采用位运算取中位节点的方式交换任务在 Heap 堆中

聊聊 Ant Design 组件库的构成

底层功能组件rc-utilKeyCode: 记录了各按键的编码,并提供按键判断工具。 hooksuseMergedState(defaultStateValue, option) 主要用于表单项的 value 值状态处理,也可以用于其他状态处理。逻辑上,首先以 option.value、option.defaultValue、defaultStateValue 的顺序设置内部 value 状态值,