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

Question

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

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

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

参考：

score 2 · Accepted Answer

安装

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

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

更新

但是随着您的更新，component state or on receiving new props将触发以下生命周期：

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

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

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

score 2 · Accepted Answer

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

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

score 1 · Accepted Answer

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

3 回答 3