标签: react

react scheduler 再解析篇

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

react-router

react-router基于 history 创建的 history 对象、以及 create-react-context 为上下游组件传递 context 数据,上游的 Router 组件用于监听地址栏的变更,随后将 history 对象以及当前的 state.location 信息写入 context;下游的 Route 组件通过工具函数 matchPath 判断 location.pathn

scheduler 源码分析

scheduler 模块用于管理重绘完成后回调的执行逻辑。在 scheduler 中,requestHostCallback 函数用于实现在重绘完成后、视线程的空闲程度以及任务预设的超时时间,以在特定的时机执行任务。在 requestHostCallback 的基础上,scheduler 使用双向链表构建含有优先级的原子任务节点,再输出添加并执行任务节点、打断任务节点执行的 api。 reques

react api 整理

本文档意在整理 react 顶层 api 的内容和实现,可参阅react 官方文档。React 包主要提供 api 接口,功能上的核心逻辑点通常由 react-dom 等包实现。 组件React 组件可将视图内容拆分为独立的、可复用的单元,以便在组件的模块制作过程中独立实现视图逻辑和业务逻辑。在 es6 语法背景下,React 组件可基于 React.Component, React.PureCo

Menu

antd 中的 Menu 组件用于绘制菜单栏,其实现基于 rc-menu。本文第一部分介绍菜单栏实现的整体结构;第二部分介绍 rc-menu;第三部分介绍 Menu 组件。 需要声明的是,本文使用 RcMenu 指代 rc-menu 输出的 Menu 组件或其实例,使用 Menu 指代 antd 输出的 Menu 组件或其实例、或抽象意义的菜单栏组件,余同。 整体结构在视图上,菜单栏分为水平布局和

Radio, Checkbox

antd 中的 Radio, Checkbox 组件均基于 rc-checkbox 实现。本文第一部分将介绍 rc-checkbox,余下两部分再介绍 Radio, Checkbox 组件。 rc-checkboxrc-checkbox 输出 Checkbox 组件。其处理逻辑较为简单,包含样式类转换、多余 props 剔除等。元素层级上,rc-checkbox 使用 span 包裹 input

Grid 栅格

antd 提供的 24 栅格系统由 Row, Col 组件实现。 Row栅格布局组件 Row 用于设定整行 row 内各组 col 的布局风格。当 props.type 为 ‘flex’ 时,意味着整行采用 flex 布局。在 flex 布局的基础上,props.justify 通过 justify-content 样式影响各 col 元素的水平排列方式;props.align 通过 align-

Layout 布局

antd 提供 Layout, Header, Sider, Content, Footer 组件用于划定页面布局。实现上,侧边栏 Sider 组件比较特殊,将在第一部分加以介绍;其余组件均将在第一部分加以介绍。 Layout布局容器 Layout, 顶部布局 Header, 内容部分 Content, 底部布局 Footer 在实现上大体相当:都是通过 generator(props) = Ba

antd-Input 组件

Input 组件Input 组件只关乎布局,其余均为常规处理。props.addonBefore 为前置标签,props.addonAfter 为后置标签,props.prefix 前缀图标,props.suffix 后缀图标。参看官方图例: Input 组件在 render 方法执行阶段将绘制出 input 原生组件。鉴于 react 的实现机制,对于 input 原生组件的处理,有受控组件和

antd-Form 组件

ant design 中的 Form 组件基于 rc-form 实现。本文第一部分将介绍 rc-form 库;第二部分再介绍 ant design 中的 Form 组件。 rc-form常规收集表单数据并作校验,只需以 store 实时记录表单数据,校验后重绘表单。这样的思路以业务代码为例,就是,以数据模型 model 集成数据处理操作,再通过 setState 将 model 中的实时数据注入组