标签: react

TreeSelect 组件

基于 rc-select 中的 generate(options) 提供下拉框处理逻辑,rc-tree-select 实现了自己的 OptionList、Selector 组件以及 internalProps 处理函数。

Select 组件

Select 组件基于 rc-select 组装外观,主要功能包含: 多种展示模式:默认的单选模式、multiple 多选模式、tags 标签模式(支持随意输入值)、combobox 。 搜索功能:通过 props.showSearch、props.onSearch、props.optionFilterProp 配置搜索过滤能力。 选项分组:通过 OptGroup 组件设置选项分组。 扩展菜单:

react 工程中使用 ts

常规React.ReactNode:children 类型。React.CSSProperties:样式类型。React.MouseEvent<HTMLElement, MouseEvent> 等:event 对象类型。React.ChangeEventHandler 等:事件处理器。React.Ref:ref 引用类型,通常需要结合 React.useRef(null)。 使用 Om

Upload 组件

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

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