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是如何渲染的,重渲染是如何工作的,那么最好的方法是取理解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函数执行有两个缺点:
- React必须去执行它的diffing算法,来检查这些组件是否需要更新UI。
- 所有的这些render函数或者函数组件中的代码都将再次执行。
第一点存在争议,但是这并不重要,因为React已经非常高效的去做了这件事。危险存在于你写的那部分代码在每次React渲染时都重复执行了。
在上面的例子中,我们有一个小的组件树。但是想像一下,如果每一个结点都有许多的孩子结点,并且这些孩子结点都可能拥有它们的子组件时,会发生什么。我们将看到我们如何去优化这些。
…