随笔分类 - React + AntD
1
摘要：React Fiber调度算法笔记 React 从v16开始引入了Fiber,为了支持时间分片，优先调度，支持渲染过程中中断，恢复。中断是为了让浏览器有机会响应更高优先级的事件。刚看到这个功能的时候就开始猜想，js是单线程的，要实现这个功能，React的渲染过程得自己将任务分片，每次执行一个分片，然
阅读全文
摘要：高阶组件(HOC) vs 包裹组件(Wrapped Component) 先给用例 function HOC(Component) { return class extends React.Component { name: string = ""; render() { return ( <> <
阅读全文
摘要：介绍一下 React 的生命周期函数 假设我们有如下的 Dom 结构 <FC> <InnerFC/> </FC> <Component> <InnerComponent/> </Compoennt> 那么在构建与刷新的过程中生命周期函数是如何执行的。先给出结论，具体的顺序如下 生命周期可以分为四个阶
阅读全文
摘要：最近学习了一下 rc-virtual-list 这个组件，记录一下。 对于一个大的列表，例如，百数量级以上，Dom 的渲染会有很大的性能压力。这个组件通过只渲染可视区域内的部分组件，实际的 Dom 数量只在两位数，从而提高了性能。 它的 Dom 结构比较简单 为了使用 virtual scroll,
阅读全文
摘要：聊聊 Dom-Align 这个包 最近在写一个弹框的 service,用到了 Dom-Align,来挨着某个元素来弹框，遇到了些坑，记录一下，以免下次再掉进去。 先聊聊 Dom-Align 怎么干活的。这个有个约定, target 指的是参考系，source(目标元素)指的是需要被定位的元素。 我们
阅读全文
摘要：聊聊 AntD 中的 Dialog 先介绍三种常用的用法， 受控模式，通过 visible 控制 Dialog 在目标组件中的显示,这个时最简单的用法。 const Demo: React.FC = () => { const [visible, setVisible] = React.useSta
阅读全文
摘要：React setState 的执行是异步还是同步 官方文档是这么说的setState() does not always immediately update the component. It may batch or defer the update until later. This mak
阅读全文
摘要：AntD-Form 是基于 rc-form 来做了一层封装，我们看看它提供了哪些额外的功能 先来看看 Form 首先按照惯例获取SizeContext,ConfigContext,主要获取Size,getPrefixCls,direction,form.requiredMark. 然后依次来获取 c
阅读全文
摘要：学习 form 的时候遇到的一些问题 使用 FormProvider 的时候发现onFormChange被触发两次。 <FormProvider validateMessages={myMessage} onFormChange={(name, { changedFields, forms }) =
阅读全文
摘要：React Virtual Dom 二三事 React 及Angular 中都有VD 一说，他们是用来组织他们的组件，负责计算差别，然后将这些差异更新到Dom树上面。VD 于Dom他们的节点是一一对应的，但是他们的结构却是不一定一样。 如何创建一个VD 节点，也就是ReactNode, 第一种方法，
阅读全文
摘要：记录一些小技巧 Promise，它的核心奥义是什么？是 resolve 与 reject.例如下面经典的用法.最为核心的就是代码里面的resolve, reject这两个方法。 Promise 就是一个链路，它是有各种 then,then,then 连起来的，规定好了调用顺序，然后呢，链路的触发点就
阅读全文
摘要：记录一些 antd 组件的功能 PortalComponent vs Portal 前者会创建一个 div, 然后 attach 这个 div 到 getContainer 的 DOM 中去，如果没有提供就直接 attach 到 body, 同时它还有第二个功能，就是禁用 attach 的组件的 s
阅读全文
摘要：谈谈 React 里面的一些类型及使用场景 React.Component<P,S,SS>, 这个类型绝对是 react 里面的一哥，P 是 props, S: State, SS: SnapShot. 凡是 class 组件，都得继承这个基类。下面是这个类的 type.d.ts. 生命周期主要参考
阅读全文
摘要：简单介绍一下 AntD Select 的用法 mode: undefined, tag, multiple undefine: 默认值，就是dropdown, tag: 跟multple 唯一的区别就是，输入的值不在list 内，敲回车，自动插入. multiple, 就是多值选择。 一些约定 sh
阅读全文
摘要：谈谈 route in AntD 路由分组与懒加载 路由分组，可以借助于前置匹配exact=,懒加载用于code split webpack 打包时减少初始包的体积，提供性能 路由分组 假设我们有一下路由 /parent/child1 /parent/child2 /parent/child3 那么
阅读全文
摘要：This artical will display the concept of react ReactNode vs ReactElement let's see the code definition. ReactNode is a superset of ReactElement, React
阅读全文
摘要：some little tech note about React and AntD Let's talk a little about ref basic usage example, we refer to the Dom. we prefer the sample1 // in ts cons
阅读全文
摘要：Simple Rules of Customized Hooks 首先，它是一个函数，跟普通的函数几乎没有区别 命名上面，以 usexxx 方式 内部用到的其他hooks, 必须至于最顶层， 不能加任何条件，unCondition 记住，它真的只是一个函数，别想太多。 Hook 函数的使用规则 Ho
阅读全文
摘要：简介一下rc-select 首先 分析一下DOM 结构 注意以下的写法，这是过时的写法 <Select> <Option key='1' value='1'> </Select>
阅读全文
1
