获得徽章 0
react 简单而美好: react 16 早期的版本对 Scheduler 的设计是采用的单向链表实现的优先队列(靠"过期时间"调整单向链表中的任务顺序)用于调整更新任务的优先级。从 react 16 中后期的版本开始 Scheduler 中使用场景变丰富了，所以改成用"最小二叉堆"来实现。堆是优先级队列的业内的标准实现。
这项改动 react 团队的介绍是：
github.com
背景知识: 二叉堆的介绍 www.cxyxiaowu.com
Scheduler 设计的变动，技术上比较基础，但是带来的好处是很大的。
这项改动 react 团队的介绍是：
github.com 背景知识: 二叉堆的介绍 www.cxyxiaowu.comScheduler 设计的变动，技术上比较基础，但是带来的好处是很大的。
展开
1
1
react 简单而美好: react 任务过期时间的再次梳理，土味儿推导了计算公式
根据下面两张图，很方便的能看出 react 中3种过期时间，以及根据过期时间判断任务的优先级。
根据下面两张图，很方便的能看出 react 中3种过期时间，以及根据过期时间判断任务的优先级。
评论
点赞
react 简单而美好：ReactDOM 源码对选区的处理(四)，这里对比下，原生 api 和 react 对可编辑的div选区偏移量和元素处理。
window.getSelection
developer.mozilla.org
图1是选择input的value中的文本的情况
图2是选择textarea的value中的文本的情况
图3是选择可编辑的div中的文本的情况
图4是选择普通的div中的文本的情况
本系列一：react 对可编辑的div选区的偏移量的获取
juejin.im
本系列二：react 对可编辑的div选区的偏移量的用处：
通过偏移量和 document.activeElement 找到选区的目标节点和符合原生 api 的偏移量juejin.im
window.getSelection
developer.mozilla.org图1是选择input的value中的文本的情况
图2是选择textarea的value中的文本的情况
图3是选择可编辑的div中的文本的情况
图4是选择普通的div中的文本的情况
本系列一：react 对可编辑的div选区的偏移量的获取
juejin.im本系列二：react 对可编辑的div选区的偏移量的用处：
通过偏移量和 document.activeElement 找到选区的目标节点和符合原生 api 的偏移量
juejin.im
展开
评论
点赞
react 简单而美好：ReactDOM 源码对选区的处理(三)，这里讲一些基础知识。
先回顾下前面的内容。
ReactDOM 源码对选区的处理(一) 之 怎么获取偏移量：
juejin.im
ReactDOM 源码对选区的处理(二) 之 通过偏移量和 document.activeElement 找到选区的目标节点和符合原生 api 的偏移量：juejin.im
为什么需要恢复选区功能：
This is useful when performing operations that could remove dom nodes and place them back in, resulting in focus being lost.
图1 是 react 对选区兼容性的处理：
原生 DOM api 对部分 input 类型 和 textarea 开放了选区的属性和接口，参见：html.spec.whatwg.org。
ReactDOM 使用 activeElement 和 getSelection 扩大了选区功能的支持范围：支持具有编辑功能的 div 节点
图2 是使用 document.activeElement 获取到不同的活跃元素
developer.mozilla.org
划选了 input, textarea, 具有 contenteditable 的 div内部的全部或部分内容，那 document.activeElement 是这个元素本身
划选了普通 div 内部的内容(含多个div夸选)，那 document.activeElement 是 body
先回顾下前面的内容。
ReactDOM 源码对选区的处理(一) 之 怎么获取偏移量：juejin.im ReactDOM 源码对选区的处理(二) 之 通过偏移量和 document.activeElement 找到选区的目标节点和符合原生 api 的偏移量：juejin.im为什么需要恢复选区功能：
This is useful when performing operations that could remove dom nodes and place them back in, resulting in focus being lost.
图1 是 react 对选区兼容性的处理：
原生 DOM api 对部分 input 类型 和 textarea 开放了选区的属性和接口，参见：
html.spec.whatwg.org。ReactDOM 使用 activeElement 和 getSelection 扩大了选区功能的支持范围：支持具有编辑功能的 div 节点
图2 是使用 document.activeElement 获取到不同的活跃元素
developer.mozilla.org 划选了 input, textarea, 具有 contenteditable 的 div内部的全部或部分内容，那 document.activeElement 是这个元素本身 划选了普通 div 内部的内容(含多个div夸选)，那 document.activeElement 是 body
展开
3
3
react 简单而美好：ReactDOM 源码对选区的处理(二)，这里讲通过偏移量和 document.activeElement 找到选区的目标节点和符合原生 api 的偏移量。
Selection: developer.mozilla.org
document.activeElement：developer.mozilla.org
上一篇介绍了 ReactDOM 源码对选区的处理(一)：juejin.im
如果已经知道了 activeElement 和偏移量的起点，就可以把选区的anchorNode 和 anchorOffset 找到；
如果已经知道了 activeElement 和偏移量的终点，就可以把选区的 focusNode 和 focusOffset 找到。
源码地址：github.com
下图就是根据root( activeElement) 和偏移量的起点(offset)或者终点(offset)找到选区开始或者结束元素和偏移量的函数。
Selection: developer.mozilla.orgdocument.activeElement：developer.mozilla.org上一篇介绍了 ReactDOM 源码对选区的处理(一)：juejin.im如果已经知道了 activeElement 和偏移量的起点，就可以把选区的anchorNode 和 anchorOffset 找到；
如果已经知道了 activeElement 和偏移量的终点，就可以把选区的 focusNode 和 focusOffset 找到。
源码地址：
github.com下图就是根据root( activeElement) 和偏移量的起点(offset)或者终点(offset)找到选区开始或者结束元素和偏移量的函数。
展开
评论
1
react 简单而美好：ReactDOM 源码对选区的处理(一)，这里先讲怎么获取偏移量。
使用场景：用户选择了 DOM 上的一些文本，在 react 组件更新后鼠标选择的状态会被清除掉，所以应该恢复之前的选择。实现的方案是在 outerNode 节点内记住选区的文本在所有文本的中的位置(偏移量)，这样可以在渲染后恢复选区的设置。
选区：developer.mozilla.org
选区范围：developer.mozilla.org
ReactDOM 选区的发展历程：github.com
这里我们先解决怎么获取 outerNode 节点内，用户选择的文本在所有文本内的偏移量。
图1是 react 16之前的方案，使用了 Range，有性能问题。
gist.github.com
github.com
图2是 react 16 后发布的新方案，从 outerNode 开始通过深度和广度遍历，找到偏移量
图3是图2的单元测试对比的版本，图2不好理解，先理解图3后在看图2
图4是作者认为图2的方案真是如诗般优美。图2的方案确实很精美的设计啊
使用场景：用户选择了 DOM 上的一些文本，在 react 组件更新后鼠标选择的状态会被清除掉，所以应该恢复之前的选择。实现的方案是在 outerNode 节点内记住选区的文本在所有文本的中的位置(偏移量)，这样可以在渲染后恢复选区的设置。
选区：
developer.mozilla.org选区范围：
developer.mozilla.orgReactDOM 选区的发展历程：
github.com这里我们先解决怎么获取 outerNode 节点内，用户选择的文本在所有文本内的偏移量。
图1是 react 16之前的方案，使用了 Range，有性能问题。gist.github.comgithub.com图2是 react 16 后发布的新方案，从 outerNode 开始通过深度和广度遍历，找到偏移量图3是图2的单元测试对比的版本，图2不好理解，先理解图3后在看图2图4是作者认为图2的方案真是如诗般优美。图2的方案确实很精美的设计啊
展开
1
1
react 简单而美好：reactDOM 对同名 radio 按钮的处理，在混合架构(原生html + react 应用，react 微前端应用)下的内在限制。
1:react 为了覆盖表单的多个场景，牺牲了性能
2: 不可跨应用
3: 不可跨技术栈
1:react 为了覆盖表单的多个场景，牺牲了性能
2: 不可跨应用
3: 不可跨技术栈
评论
3