生命周期方法在初始渲染和重新渲染阶段被调用两次答案

【问题标题】：Lifecycle methods gets called Twice at initial render and at re-render phase生命周期方法在初始渲染和重新渲染阶段被调用两次
【发布时间】：2020-12-10 04:51:13
【问题描述】：

当我在每个生命周期方法中使用 console.log() 时，在 Chrome 控制台中，我看到每个方法都被调用了两次。
所以，我创建了一个新的 React 应用程序。并在渲染中做了console.log()。它仍然在初始渲染时被调用两次。
我尝试在stackoverflow上找到答案，但他们通过编写脚本忽略了这个问题，这不是解决方案。因为，即使他们可以显示渲染被调用一次，它实际上在后台被调用了两次。

-- 我卸载了节点，Visual Studio。去除任何残留物。并再次安装。我还是没能解决这个问题。

我将不胜感激。提前致谢。

class Person extends Component {
  constructor() {
    super();
    console.log("[Person.js] constructor1");
    console.log("[Person.js] constructor2");
  }
  render() {
    console.log("[Person.js] render1");
    console.log("[Person.js] render2");
    return <h1>Person Component</h1>;
  }
}

Concole 输出：

Person.js:6 [Person.js] constructor1
Person.js:7 [Person.js] constructor2
Person.js:6 [Person.js] constructor1
Person.js:7 [Person.js] constructor2
Person.js:10 [Person.js] render1
Person.js:11 [Person.js] render2
Person.js:10 [Person.js] render1
Person.js:11 [Person.js] render2

【问题讨论】：

由于您没有对组件挂载执行任何异步操作，并且这里也没有传递任何道具，我怀疑父组件可能是原因。尝试检查父级是否也在重新渲染。

标签： reactjs

【解决方案1】：

请检查您的 index.js，如果您的 App.js 包含在 <React.StrictMode> 中，那么它将调用生命周期钩子两次。

要解决您的问题，您只需从 <React.StrictMode> 解包 App.js。

index.js

ReactDOM.render(
<App />, document.getElementById('root'));

请点击链接以获取有关React.StrictMode 的详细信息以及 Detecting unexpected side effects

【讨论】：

【解决方案2】：

要在 react 中删除不必要的渲染，您可以将 PureComponent 用于类 Component，将 React.memo() 用于功能性组件。

这将检查 props 的变化，如果只有 props 发生变化，则重新渲染组件。这在parent 频繁触发不影响孩子的状态更改时很有用。

【讨论】：