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

Posted 2023-02-22

【中文标题】反应：类中的所有方法都运行 2 次

【英文标题】：REACT : all method in class are run 2 time

【发布时间】：2020-07-25 11:33:08

【问题描述】：

首先抱歉，如果我的英语不完美，我学习了：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"  />
          <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"  />
          <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() 也运行了两次，但是当我们进行更新时构造函数没有运行，所以这不是问题

【问题讨论】：

这能回答你的问题吗？ Why is my React component is rendering twice?

【参考方案1】：

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

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

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

Source

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

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

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

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

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

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

参考说明Stateful vs Stateless

【讨论】：

是的，我已经看到了这张图片，并且我理解了我认为的 react 生命周期的用法，但我的意思是我从不更新状态或道具，所以我不明白：/ 如果我添加了一个带有 a 的构造函数console.loge（“testConstructor”），我在控制台中看到“testConstructor”两次。所以即使我改变状态或其他构造函数也不应该启动（我不会两次调用我的组件）所以是的，如果我这样做状态更改器或我添加新的道具渲染再次调用但不是这种情况，即使是这样，构造函数也不应该启动：/

@Nicolas 请参考 Virtual DOM 的编辑问题

是的，我想我明白了（我去阅读更多内容以获取更多信息），但我不认为问题出在于此，我编辑了我的问题，看我在其中写了 console.log()构造函数，我在控制台中也看到了两次结果......但是构造函数在更新时没有运行。感谢您的宝贵时间^^'

不会运行构造函数，只会运行render方法

为您的逻辑使用 componentDidMount