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
![[呲牙]](http://lf3-cdn-tos.bytescm.com/obj/static/xitu_juejin_web/img/jj_emoji_2.cd1e2bd.png)
![[流泪]](http://lf3-cdn-tos.bytescm.com/obj/static/xitu_juejin_web/img/jj_emoji_6.dde0d83.png)
![[惊喜]](http://lf3-cdn-tos.bytescm.com/obj/static/xitu_juejin_web/img/jj_emoji_93.5ee641b.png)