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 调用的解决方案，这就是 React 提出 Virtual DOM 的核心目的。

Diffing 算法

调用 React 的 render() 方法，会创建一棵由 React 元素组成的树。在下一次 state 或 props 更新时，相同的 render() 方法会返回一棵不同的树。React 需要基于这两棵树之间的差别来判断如何高效的更新 UI。

这里获取最高效的更新时，React提出了一套 O(n) 的启发式算法：

1. 两个不同类型的元素会产生出不同的树；
2. 开发者可以通过设置 key 属性，来告知渲染哪些子元素在不同的渲染下可以保存不变；

综上设计，这就是为什么 key 值对于性能来说是非常有帮助的属性，在实际开发中你还可以使用 shouldComponentUpdate 自定义更新时机。

Batching 操作

所谓的batching就是将多次比较的结果合并后一次性更新到页面，从而有效地减少页面渲染的次数，提高渲染效率。

资料

你不知道的 React Virtual DOM

React’s diff algorithm

React官方文档-协调

来源

《考试竞技》微信小程序