React重渲染时如何保留复选框状态与焦点？UnReact库求解

适配UnReact场景的优化方案 #

1. 状态快照+恢复机制 #

在执行DOM替换前，先收集当前页面的关键用户状态，替换完成后再将这些状态恢复到新DOM中：

• 焦点状态：记录document.activeElement，保存该元素的唯一标识（比如id、自定义属性），替换后找到新DOM中对应的元素，调用element.focus()；如果是输入类元素，还需要恢复selectionStart和selectionEnd属性。
• 表单控件状态：遍历所有表单元素，根据类型保存状态：
  • 复选框/单选框：保存checked值
  • 输入框/文本域：保存value值
  • 下拉选择框：保存selectedIndex或选中项的value
    替换完成后，匹配新DOM中的对应控件，将保存的状态赋值回去。

2. 增量更新替代全量替换 #

放弃克隆整个DOM树再替换的思路，改为只更新需要变化的DOM节点：

• 给每个组件或DOM节点关联对应的状态片段，当状态变化时，仅定位到受影响的DOM节点，直接修改其属性、文本内容或子节点，而非替换整个父树。这种方式从根源上避免了状态丢失，因为未变化的DOM节点完全保留，用户交互状态自然不会被重置。
• 实现简单的差异检测：比如对比状态变化前后的UI描述（比如你用来生成DOM的模板或配置），找出差异对应的DOM路径，精准更新。

3. 局部节点替换而非全树替换 #

如果必须保留克隆生成新DOM的流程，可以在替换前对比新旧DOM树，只替换存在差异的节点：

• 递归遍历旧DOM和克隆后的新DOM，使用Node.isEqualNode()判断节点是否完全一致，对于不一致的节点，仅用新节点替换旧节点，一致的节点则保留原节点（不替换）。这样未变化的节点的用户状态会被完整保留。

React的处理方式 #

React核心通过虚拟DOM（VDOM）+ 增量更新解决这个问题：

1. 虚拟DOM Diff：状态变化后生成新的虚拟DOM树，通过Diff算法对比新旧虚拟DOM，找出最小差异集合，只将这些差异应用到真实DOM上，避免全树替换。
2. DOM节点复用：React通过key属性识别同一组件/元素，在Diff过程中会复用已存在的DOM节点，而非重新创建，这样节点的用户交互状态（焦点、表单值）会被保留。
3. 表单状态管理：
   • 受控组件：表单元素的value/checked由React状态驱动，用户输入时同步更新状态，状态变化时同步更新DOM，DOM与状态始终保持一致，无需额外处理状态保存。
   • 非受控组件：通过ref直接访问真实DOM元素，React不会主动覆盖这些元素的状态，除非开发者显式修改。
4. 内置状态恢复：React内部会处理焦点、滚动位置等全局状态的保存与恢复，比如在组件更新后自动将焦点还原到之前的元素。

内容的提问来源于stack exchange，提问作者James Adams