反应：类中的所有方法都运行 2 次

Question

首先抱歉，如果我的英语不完美，我学习了：x

我的反应有问题，我的所有组件都运行了两次，例如如果我写“console.log('test');”在渲染函数中，所以我在控制台中看到了两次“测试”...

只是为了指定，当我为组件使用函数并且在类中所有默认方法（构造函数，渲染，componentDidMount，...）在创建或修改组件时运行两次时，我没有这个问题（不破坏组件WillUnmount 已运行一次）。

问题不在于我的代码，我尝试创建一个新应用程序（使用 create-react-app）并通过一个类更改功能，但结果是相同的（即使在另一台计算机上）

创建项目后我唯一更改的文件（我只更改了第 1 行、第 5 行和第 7 行）：

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

class App extends Component {
  render() {
    console.log('test');
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <p>
            Edit <code>src/App.js</code> and save to reload.
        </p>
          <a
            className="App-link"
            href="https://reactjs.org"
            target="_blank"
            rel="noopener noreferrer"
          >
            Learn React
        </a>
        </header>
      </div>
    );
  }

}

export default App;

我也指定了，我现在已经读过 react prefer 函数，类已被贬值，但我目前正在学习 react，我喜欢探索所有可能性 :)

感谢您的帮助；）再次为我的英语感到抱歉：x

编辑：

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

class App extends Component {
  constructor() {
    super()
    console.log("test")
  }
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <p>
            Edit <code>src/App.js</code> and save to reload.
        </p>
          <a
            className="App-link"
            href="https://reactjs.org"
            target="_blank"
            rel="noopener noreferrer"
          >
            Learn React
        </a>
        </header>
      </div>
    );
  }

}

export default App;

在这种情况下，console.log() 也运行了两次，但是当我们进行更新时构造函数没有运行，所以这不是问题

Answer 1

首先要了解render()、componentDidMount()等React生命周期方法的用法。

render()方法在状态改变时被调用，当你运行setState()方法时render()方法会被再次触发。所以render()是根据应用程序状态不断定制你的UI的方法。您无法控制该方法只运行一次，因为您需要经常重新生成 UI。你必须参考 React 中的有状态和无状态组件。

无状态组件只会生成一次，除非您重新创建组件，否则无法更改状态。

Source

有状态组件render()方法被触发两次的原因。您必须了解 React Virtual DOM，React 最初会在虚拟 DOM 中呈现更改并识别影响的特定更改，然后它只会在真实 DOM 中呈现更改后的 UI。

在 React 中更新浏览器的 DOM 是一个三步过程。

1. 只要有任何变化，整个 UI 都会以虚拟 DOM 表示形式重新呈现。

2. 将计算上一个 Virtual DOM 表示与新的表示之间的差异。

3. 真实的 DOM 将根据实际更改的内容进行更新。这很像打补丁。

从字面上看，渲染方法将在虚拟 DOM 和有状态组件中的真实 DOM 中调用。 render()方法中只写UI逻辑，不写发送HTTP请求等功能逻辑，可以写到componentDidMount()方法中。

参考说明Stateful vs Stateless