如果 React 已经使用虚拟 DOM 概念，为什么还要使用 React.memo()？答案

【问题标题】：Why use React.memo() if React already uses Virtual DOM concept?如果 React 已经使用虚拟 DOM 概念，为什么还要使用 React.memo()？
【发布时间】：2023-01-16 22:16:04
【问题描述】：

我是 React JS 的初学者。我遇到了 React.memo() 一个 HOC 组件，如果组件执行结果与其记忆的先前结果不同，它基本上只会重新渲染组件。但是既然已经有了Virtual DOM的概念，为什么还要用呢？如果生成的虚拟 DOM 与主 DOM 相同，虚拟 DOM 概念是否也做同样的事情，即不重新渲染组件？如果我理解正确，两者不是都遵循相同的概念功能吗？

【问题讨论】：

“如果生成的虚拟 DOM 相同，虚拟 DOM 概念是否也做同样的事情，即不重新渲染组件“ - 嗯，它可以，但 React 太笨了，无法实现它。它总是重新渲染所有子组件，除非你明确告诉它不要这样做。

标签： javascript reactjs react-hooks

【解决方案1】：

React 渲染发生在多个级别。虚拟 DOM 在 React<->Browser 启动，但使用 React.memo() 可以减少 React 代码需要运行的次数。简而言之：

虚拟 DOM：减少 HTML 元素的创建/编辑

React.memo()：减少 React 组件重新渲染（甚至在接触 HTML 之前）

【讨论】：

所以你想说的是 React。 memo() 甚至不需要创建虚拟 DOM 并将组件的结果与其之前的状态进行比较，而无需创建虚拟 DOM？
@VipulPrakash 不。它比较道具，而不是渲染组件的结果。它不知道组件的状态。

【解决方案2】：

因为它自己 - 是的，相似的到虚拟 DOM。但是来自documentation：

[memo()] 组件通常不会在其父组件重新渲染时重新渲染。 […] 记忆只是一种性能优化。 [...] React 通常会在父组件重新渲染时重新渲染组件。

所以换句话说，你可以使用React.memo()来优化组件，如果你知道即使父组件改变了，这个组件也不会改变。

【讨论】：

【解决方案3】：

React 将执行您的功能组件，将其与 dom 进行比较，如果有更改将进行更新。如果你使用React.memo()，你的功能组件将不会再次执行，也不会与dom进行比较。

因此，如果您的函数组件中有一个需要一秒钟的计算，没有 React.memo() 它将再次运行该计算。

【讨论】：