ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

2022年前端React的100道面试题的第3题:React的渲染

2021-11-25 17:31:31  阅读:124  来源: 互联网

标签:面试题 render 渲染 DOM Virtual React 更新 2022


问题

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

 

来源

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

 

标签:面试题,render,渲染,DOM,Virtual,React,更新,2022
来源: https://www.cnblogs.com/nachao/p/15603702.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有