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

Question

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

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

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

参考：

Answer 1

对于一个组件，render() 函数显然可以运行多次用于同一个安装。您可以参考 React 文档中的 this table。

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

Answer 2

Mounting

起初，Reactjs 只会渲染一次方法，生命周期为：

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

Updating

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

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

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

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

Answer 3

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

How many times render will actually run in a React Component