微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

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

 

来源

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

 

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐