分类: frontend

Upload 组件

Upload 组件构成如下: rc-upload 提供基本的文件上传功能。Upload 组件在 rc-upload 基础上创建外观,实现文件与表单交互,并集成 UploadList 文件列表。 rc-uploadrc-upload 的实现逻辑基于:由隐藏的 input 元素获取上传文件,再通过 ajax 上传 FormData 数据。上传时包含常规的 ajax 功能点以及 input 表单控件的功

react fiber 代码梳理篇

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

前端模块化机制

前端模块化规范有 AMD、CMD、CommonJS、ES2015 规范: AMD 模块化规范:requirejs 为其主要实现。 CMD 模块化规范:seajs 为其主要实现。 CommonJS 模块化规范:作为CommonJS 规范的一部分,nodejs是其较常见的实现。 ES 2015 模块化规范:作为es 官方规范的一部分。 对于 AMD、CMD,本文尝试解读 requirejs、sea

node 命令行工具

示例简单的命令行工具一般按照以下流程编写: package.json 文件中添加 bin 属性,指定命令的名称,如 “bin”: { “create-app”: “bin/create-app.js” }。 bin/create-app.js 文件中添加 #!/usr/bin/env node,指定这是一个使用 node 执行的命令行工具。 使用 commander.js 编写 bin/crea

图片校验码

纯前端实现纯前端实现图片校验码指的是通过 canvas 绘制随机串的方式。这种方式有极大的弊端:如果随机串在前端生成,那么通过拦截伪造请求仍然能正常调用后台接口;如果随机串由后台发送给前端,那么中间可以被拦截并伪造(当然,可尝试用加密技术进行保护)。因此,这种方式大体适用于学习研究的目的。以下代码段基于 react 验证码组件 整理,其实现也可以参考 在React中随机生成图形验证码。您可以在 c

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 状态值,