React组件何时重渲染

React组件何时重渲染

本篇文章是一篇译文。

原文	When does React re-render components?
作者	Felix
翻译	Wang Pengfei

众所周知，React通过只更新变化的UI界面，给用户提供了一个效率很高体验。

当深入研究React渲染机制，有一些术语概念比较难以理解。很长一段时间内，我不清楚VDOM是什么或者说React是如何决定去重渲染组件的。

在这篇文章的第一部分，我将会解释与React渲染相关的一些比较重要的概念，并且讲清楚React是如何决定去渲染一个组件的。

在文章的最后，我将会告诉你如何去组织优化你的React应用，来提高效率。

如果，读了这篇文章之后，你有一些问题或者发现了一些错误，你可以在文章下方留言或者给我发邮件。

目录

• React的渲染
  • 什么是渲染
  • 什么是虚拟树(VDOM)？
  • 这对效率意味着什么？
  • 如何在实际中看到重渲染过程？
• React何时执行重渲染？
  • 当组件props发生改变时，为什么组件不更新？
• 强制React组件重新渲染
  • 使用React的forceUpdate函数
  • 在React hooks中强制更新组件
• 总结

React的渲染

什么是渲染

如果我们想要理解React是如何渲染的，重渲染是如何工作的，那么最好的方法是取理解react在背后做了哪些事。

渲染是一个可以在不同抽象层级上理解的术语。不同场景下，它有着不同的含义。但是最终无论在任何场景下，它都被描述为生成一个图片的过程。

但是首先，我们必须去理解文档对象模型(DOM, Document Object Model)是什么：

“The W3C Document Object Model (DOM) is a platform and language-neutral interface that allows programs and scripts to dynamically access and update the content, structure, and style of a document.”

用白话来说，DOM就是当你打开一个网页，你在屏幕上看到的任何东西，这些东西都是通过标记语言HTML表达的。

浏览器允许JavaScript语言通过API修改DOM: 全局document对象代表了HTML DOM的状态，并且为用户（程序员）提供了一些可以修改DOM的函数接口。

你可以使用JavaScript通过DOM编程接口去修改DOM，例如document.write、Node.appendChild和Element.setAttribute等函数。

什么是虚拟树(VDOM)？

React提供了另外一个DOM树，叫做虚拟树（VDOM, virtual dom）, 它是基于DOM的另一个抽象层级。它由React应用元素组成。

一个React应用的state发生改变，首先会被应用于VDOM。如果VDOM的新state改变触发了UI的改变，ReactDOM库会通过只更新需要更新的部分来高效的去更新界面。

例如，如果只有一个元素的属性（attribute）发生了改变，React将会通过document.setAttribute（或者其他类似的东西）只更新Html元素的的属性。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NVP9EXLO-1625214895504)(https://felixgerschau.com/static/a8c4277dd79350b5621add534576cfcd/5a190/react-rerender-vdom.png)]

红色的点表示DOM树的更新。更新VDOM并不会触发真实DOM的更新。

当VDOM更新时，React将会比较此时的VDOM和之前的VDOM的快照。如果没有发生变化，真实的DOM不会改变。将新的VDOM与旧的VDOM比较的过程，称之为对比（diffing）。

由于真实的DOM更新会触发界面的重绘，所以真实的DOM更新是非常缓慢的。React通过减少更新的机会，大大提高了DOM更新的效率。

因此，我们必须认识到原生DOM与虚拟DOM更新的差异。

想要了解更多关于它们是如何工作的，请阅读react的相关文档reconciliation。

这对效率意味着什么？

当我们讨论React的渲染时，我们通常讨论的是render函数，它们并不总是触发一个界面UI的更新。

让我一起看一个例子：

const App = () => {
    const [message, setMessage] = React.useState('');
    return (
        <>
        <Tile message={message} />
        <Tile />
        </>
    );
};

在函数组件中,函数的执行等价于类组件中render函数的执行。

当父组件的state发生改变时(在这个例子中是App), 两个Title组件将会重新渲染（re-render），即使第二个没有接受任何属性（props）。
这使render函数被调用三次，但是实际的DOM修改仅在第一个Title组件中产生。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YVA7jeXd-1625214895507)(https://felixgerschau.com/static/3221cabdf6bdab6681a6512252dd7e00/5a190/react-rerender-vdom-comparison.png)]

红色的点表示渲染。在React中，这意味着render函数执行。在真实DOM中，这意味着UI的重绘。

有一个好消息是你并不需要为界面的重绘的效率担心太多，React早已为你优化了很多，提高了效率。

坏消息是：所有这些左侧的红色点意味着这三个组件的render函数都执行了。

这些render函数执行有两个缺点：

1. React必须去执行它的diffing算法，来检查这些组件是否需要更新UI。
2. 所有的这些render函数或者函数组件中的代码都将再次执行。

第一点存在争议，但是这并不重要，因为React已经非常高效的去做了这件事。危险存在于你写的那部分代码在每次React渲染时都重复执行了。

在上面的例子中，我们有一个小的组件树。但是想像一下，如果每一个结点都有许多的孩子结点，并且这些孩子结点都可能拥有它们的子组件时，会发生什么。我们将看到我们如何去优化这些。

…

>>> 点击这里，继续阅读。