2022年前端React的100道面试题的第3题：React的渲染
问题
ReactDOM.render() 渲染更新都会基于 Virtual DOM 技术方案，下面对其理解正确的是？
选项
A. 它相对于直接操作原生 DOM 最大的优势在于 diff（差异计算） 和 batching（合并更新）。
B. render 方法是将 JSX 代码编译成 ReactELement 对象，它描述当前组件内容的数据结构。
C. 比对的算法的复杂程度为 O(n 3 )，其中 n 是树中元素的数量。
D. 提供了更好的跨平台的能力。
答案
A、B、D
解答
Virtual DOM 是一种编程概念。在这个概念里， UI 以一种理想化的，或者说“虚拟的”表现形式被保存于内存中，并通过如 ReactDOM 等类库使之与“真实的” DOM 同步。这一过程叫做
因为 渲染线程 与 JS 引擎线程 的互斥关系，DOM API 的读写都涉及页面布局的 重绘（repaint）和回流（reflow）成本考虑，需要一种减少不必要的 DOM API 调用
Diffing 算法
调用 React 的 render() 方法，会创建一棵由 React 元素组成的树。在下一次 state 或 props 更新时，相同的 render() 方法会返回一棵不同的树。React 需要基于这两棵树之间的差别来判断如何高效的更新 UI。
这里获取最高效的更新时，React提出了一套 O(n) 的启发式算法：
-
两个不同类型的元素会产生出不同的树；
-
开发者可以通过设置
key属性，来告知渲染哪些子元素在不同的渲染下可以保存不变；
综上设计，这就是为什么 key 值对于性能来说是非常有帮助的属性，在实际开发中你还可以使用 shouldComponentUpdate 自定义更新时机。
Batching 操作
所谓的batching就是将多次比较的结果合并后一次性更新到页面，从而有效地减少页面渲染的次数，提高渲染效率。
资料
来源
