React 是否仅重新渲染已更改的内容以提高渲染速度？答案

【问题标题】：Does React only re-rendering what has changed benefit rendering speed?React 是否仅重新渲染已更改的内容以提高渲染速度？
【发布时间】：2017-11-29 17:48:19
【问题描述】：

为什么 React 的“只更新必要的”功能对性能很重要？
来自https://facebook.github.io/react/docs/rendering-elements.html#react-only-updates-whats-necessary

React 仅重新渲染已更改组件的功能是否会影响浏览器渲染速度/性能？

React 声称只更新需要更新的 UI 组件，而不是整个页面，可以提高性能。来自https://facebook.github.io/react/docs/optimizing-performance.html

在内部，React 使用了几种巧妙的技术来最大限度地减少更新 UI 所需的昂贵 DOM 操作的数量。对于许多应用程序，使用 React 将带来快速的用户界面，而无需做太多工作来专门优化性能。

在应用程序的更新/绘制循环中，不是必须重新绘制整个屏幕吗？如果浏览器必须在每一帧都重绘所有内容，浏览器如何从仅渲染（重绘？）一个元素中受益？浏览器有一个帧率 (MDN Frame Rate)，那么帧率如何与“只更新必要的内容”相协调？

我看不出只更新浏览器中的一个元素会如何影响浏览器的绘制。在实际推送渲染之前，React 的 javascript 对象表示可能很快，但如果 React 只是将差异渲染到实际 DOM，这对性能有何帮助？

一个较低级别的问题可能是：浏览器如何在不重绘/重排布局时节省计算量？不是每一帧都要画吗？

我提到了这些其他的问题，这些问题是热门的，但没有专门解决我的问题：

【问题讨论】：

“刷整面墙还是重新刷一部分墙”哪个更省时更好？
@MayankShukla 在实际的宏观人类世界中，显然是画了墙的一部分。但是它在浏览器中是如何工作的呢？

标签： performance reactjs browser

【解决方案1】：

你自己在这里引用了答案：

在内部，React 使用了几种巧妙的技术来最小化更新 UI 所需的昂贵 DOM 操作的数量。对于很多应用程序，使用 React 将导致快速的用户界面，而无需做了大量工作来专门优化性能。

React 不关心优化低级问题，例如页面如何重绘（这可能由操作系统本身处理），而是如何有效地使用 DOM。众所周知，执行的 DOM 操作越多，整体性能就越差。 React 只是用来最小化那些 DOM 操作。

【讨论】：

如果你愿意给出一个低级的解释，我很感兴趣。从高层次的角度来看这是有道理的，但我想知道，如果最终浏览器每帧都重新绘制一个页面，那么它不是重新渲染 DOM 吗？换句话说，如果我有 10 个像素，我仍然必须以 60fps 的速度重新绘制它们（比如说），无论它们是否从蓝色变为红色？ DOM 到 Screen 之间是否有一些我缺少的步骤？
是的。 DOM 操作本身可能很慢。更少/更有效的 DOM 操作 == 更快。屏幕重绘与正在使用的用户空间库是正交的。
谢谢@blockhead，我认为你是对的，在 React 的上下文中提出这个问题意味着你的问题是最好的答案（即使你没有进入 DOM 操作的异步批处理，在高水平你的答案是正确的）。我认为此时我剩下的问题与 React 无关。作为一个高级框架，React 最小化 DOM 操作是这个抽象级别的答案。关于浏览器如何在较低级别工作，我将单独探讨。