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元素的的属性。

virtual dom

红色的点表示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 组件中产生。 VDOM与DOM

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

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

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

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

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

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

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

如何在实际中看到重渲染过程？ #

React开发者工具，可以在 Components -> View Settings -> Highlight updates when components render 中可以设置高亮渲染。这会使用看到 虚拟渲染（ virtual renders） 。

如果你想看到 原生渲染（native re-renders） ，你可以在谷歌开发者工具中设置： dot menu on the right -> More tools -> Rendering -> Paint flashing 。

现在点击你的app，首先React重渲染高亮，接着原生渲染，并且 你会看到React做了多少优化渲染的工作 。

React何时执行重渲染？ #

在之前，我们看到了什么导致了UI的重绘，但是React组件的渲染函数是什么时候执行的呢？

React计划每次渲染执行都是在 组件的状态 发生改变时。

计划一次渲染意味着render函数并不是立即执行的。React将会寻找一个最佳时机。

改变状态意味着React会触发一个更新，当我们调用 setState 函数时（在React hook中，使用 useState ）。这不仅仅意味着组件的render函数将会执行，同样意味着，它的子组件都将执行，无论它们的props是否发生改变。

如果你的app缺少一个合理的结构，那么运行时与你的期望相比可能会执行更多的javascript代码，因为更新一个父节点也意味着执行它所有的子节点的render函数。

在文章的最后一个部分，我们将看到一些建议，它会帮助你提前阻止这些情况的发生。

当组件props发生改变时，为什么组件不更新？ #

当一个组件的props改变时，但是组件并不更新可能有两点原因：

setState 没有以正确的方式更新props。
prop的引用的对象最终是一样的。

正如我们之前看到的那样，当你调用 setState 函数去改变一个state时（或者在函数组件中通过 useState hook,提供了一个函数）React将会重新渲染组件。

最终结果是，因此，当父组件的状态通过这些函数之一发生变化时，子组件才会更新。

直接改变这些props对象是不被允许的 ，因为这并不会触发任何改变，React不会注意到这些变化。

this.props.user.name = 'Felix';

不要做这种事！

你可以在父组件中这样更新state，而不是像上面那样更新子组件的props：

const Parent = () => {
    const [user, setUser] = React.useState({ name: 'Felix' });
    const handleInput = (e) => {
        e.preventDefault();
        setUser({
        ...user,
        name: e.target.value,
    return (
        <input onChange={handleInput} value={user.name} />
        <Child user={user} />
const Child = ({ user }) => (