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官方文档-协调

 

来源

搜索《考试竞技》微信小程序

 

相关文章

一、前言 在组件方面react和Vue一样的,核心思想玩的就是组件...
前言: 前段时间学习完react后,刚好就接到公司一个react项目...
前言: 最近收到组长通知我们项目组后面新开的项目准备统一技...
react 中的高阶组件主要是对于 hooks 之前的类组件来说的,如...
我们上一节了解了组件的更新机制,但是只是停留在表层上,例...
我们上一节了解了 react 的虚拟 dom 的格式,如何把虚拟 dom...