React渲染模型和本机工具包之间有什么区别

问题描述 投票:0回答:2

我应该澄清一下,我对渲染模型特别感兴趣,因为据我所知,React仅重新渲染已经改变的东西,像GTK和QT这样的原生工具包不会这样做吗?他们做了什么呢?

reactjs qt gtk
2个回答
1
投票

原生工具包也只重新渲染已经改变的东西,但它发生的方式有点不同。

原生工具包渲染包括在字面上向屏幕绘制像素。在React中,渲染包括操作DOM,然后由浏览器呈现到页面中,然后该页面的像素由编写浏览器的本机工具包绘制到屏幕上。因此本机工具包具有在每个级别优化事物都有一点自由,而React只控制DOM级别。

粗略地说,在GTK中,UI小部件能够在知道某些内容已发生变化并需要重新呈现时使其像素区域“无效”。在下一次绘制更新​​期间,将根据新状态重绘无效区域。例如,工具包可以将在绘制更新之间发生的多个失效合并为一个,以便优化事物。


0
投票

我想你已经知道什么是DOM了。所有javascript流行框架的核心是DOM Manipulation,这是给你“反应”的感觉,当一些元素改变而没有页面重新加载。通常,DOM操作在性能方面非常昂贵,因为您必须监听更改并在某些情况下重新呈现整个DOM。 React的反应系统要好得多!

在React中,对于每个DOM对象,都有一个对应的“虚拟DOM对象”。虚拟DOM对象是DOM对象的表示,就像轻量级副本一样。虚拟DOM对象具有与真实DOM对象相同的属性,但它缺乏直接更改屏幕上内容的真实功能。操纵DOM很慢。操作虚拟DOM要快得多......当您渲染JSX元素时,每个虚拟DOM对象都会更新。

这听起来非常低效,但成本微不足道,因为虚拟DOM可以如此快速地更新。

虚拟DOM更新后,React会将虚拟DOM与更新前获取的虚拟DOM快照进行比较。

通过将新虚拟DOM与更新前版本进行比较,React确切地确定了哪些虚拟DOM对象已更改。这个过程叫做“差异化”。

这就是为什么不可变性在反应中如此重要,在创建新节点时比在特定现有节点中监听更改更容易检测。

在这个awesome article中查看更复杂的解释

© www.soinside.com 2019 - 2024. All rights reserved.