渲染将在 React 组件中实际运行多少次答案

【问题标题】：How many times render will actually run in a React Component渲染将在 React 组件中实际运行多少次
【发布时间】：2020-01-06 08:11:48
【问题描述】：

当我偶然发现这个时，我正在使用 React LifeCycle 方法：

当我看到 render() 函数运行 2 次时，我感到很困惑。我所知道的是 React Life-Cycle 中的任何函数都只运行一次。那么，为什么我在这里看到 2 个渲染函数（或运行 2 次）。不会影响第二次运行的内存和过度使用。

此外，我们如何知道渲染函数将在哪里运行（或在什么阶段），因为它可以在 React Cycle 中的两个地方运行。金迪，帮忙澄清一下。

参考：

【问题讨论】：

你在哪里看到它运行了 2 次？它在安装时运行一次，在更新时运行一次。这是两件不同的事情
第一个是挂载期间的初始渲染调用，第二个是每个后续渲染。
“我所知道的是 React Life-Cycle 中的任何函数都只运行一次”——这根本不是真的。其中一些在组件的生命周期中只运行一次，例如componentDidMount 或componentWillUnmount，但其中一些可以运行无限次，例如render 或componentWillUpdate。至于你的问题，render 在组件挂载时运行，and 每次状态或道具改变时，除非你实现一个自定义的shouldComponentUpdate 函数，你可以用它来查看当前和以前的道具/状态并手动控制它是否应该重新渲染
如果父级重新渲染，渲染也可以重新运行，尽管有一些方法可以避免这种情况（这是一个好主意，因为您可能并不总是希望重新渲染一个组件，因为它父级重新渲染）。有关于如何做到这一点的帖子/文章
OP，根据这个列表，您不会认为渲染只运行两次，是吗？整个 Updating 部分将在安装组件时反复运行多次。

【解决方案1】：

对于一个组件，render() 函数显然可以为同一个挂载运行多次。您可以参考 React 文档中的 this 表。

从表中可以看出，如果一个组件被挂载，只有constructor和componentDidMount会运行一次（不包括componentWillUnmount在组件卸载时也运行一次），而其他生命周期方法可以运行无限次，取决于该组件的更新次数。

【讨论】：

【解决方案2】：

安装

一开始，Reactjs 只会渲染一次方法，生命周期是：

constructor();
static getDerivedStateFromProps()
render();
componentDidMount();

更新

但是当你更新component state or on receiving new props 会触发以下生命周期：

static getDerivedStateFromProps()
shouldComponentUpdate();
render();
getSnapshotBeforeUpdate();
componentDidUpdate();

不是这样，从shouldComponentUpdate() 返回 false 不会触发渲染

除render() 之外的所有方法都是可选的

【讨论】：

【解决方案3】：

简短的回答是，每当 state 或 prop 的值发生变化时，您的渲染方法将一直运行，直到并且除非您通过从生命周期方法返回 false 来强制停止，如 @Navin Gelot 提到的，那么它将不会运行渲染方法，否则是的。

【讨论】：