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

首先对不起，如果我的英语不完美，我学习：x

我的E react有一个问题，我所有的组件都运行了两次，例如，如果我在渲染函数中写入“console.log（'test'）；”，那么我在控制台中看到了两次“test”

仅为了指定，当我为组件使用函数时，我没有这个问题，并且在类中，当创建或修改组件时，所有默认方法（构造函数、呈现、componentDidMount，…）都会运行两次（而不是析构函数componentWillUnmount只运行一次）

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

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

我也指定了，我已经读过react现在更喜欢函数，类被贬低了，但我现在学习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（）也运行了两次，但在我们执行更新时构造函数没有运行，因此问题不在于此

首先，您应该了解React生命周期方法的用法，例如

render（）

，

componentDidMount（）

只要状态发生更改，就会调用

render（）

方法，当您运行

setState（）

方法时，将再次触发

render（）

方法。因此，

render（）

是根据应用程序状态不断定制UI的方法。您不能控制该方法只运行一次，因为您需要频繁地重新生成UI。您必须参考React中的有状态和无状态组件

无状态组件将生成一次，并且除非重新创建该组件，否则无法更改状态

有状态组件

render（）

方法的原因被触发两次。您必须了解React虚拟DOM，它React最初呈现虚拟DOM中的更改，并确定影响的特定更改，然后它仅呈现真实DOM中更改的UI

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

无论何时任何内容发生更改，整个UI都将在虚拟DOM表示中重新呈现

将计算以前的虚拟DOM表示与新的虚拟DOM表示之间的差异

真正的DOM将使用实际更改的内容进行更新。这非常类似于应用补丁

实际上，渲染方法将在虚拟DOM中调用，而在有状态组件中调用真实DOM。只写

render（）

方法中的UI逻辑不要写功能逻辑，例如发送HTTP请求，您可以将它们写入

componentDidMount（）

方法

---

请参阅说明

这是否回答了您的问题？是的，我已经看到了这张图片，我理解了react lifecycle的用法，但我的意思是我从来没有更新过状态或道具，所以我不理解：/i如果我添加了一个带有console.loge（“testConstructor”）的构造函数，我会在控制台中看到两次“testConstructor”。。因此，即使我改变状态或其他，构造器也不应该启动（我不会两次调用我的组件），所以是的，如果我在状态中做了一个更改，或者我添加了一个新的道具，呈现是再次调用，但不是这样，即使是这样，构造器也不应该启动：/@Nicolas请参考编辑后的问题，了解虚拟DOMYes，我想我明白了（我为be sur阅读了更多内容）但我认为问题不在于此，我编辑了我的提问，看，我写了console.log（）在构造函数中，我在控制台中两次看到结果…但是在更新时构造函数不会运行。感谢您的时间^^它不会运行构造函数，它只会为您的逻辑运行render methodUse componentDidMount

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;