构造函数和渲染方法在反应组件中运行两次

Posted 2023-02-22

【中文标题】构造函数和渲染方法在反应组件中运行两次

【英文标题】：Constructor and render methods run twice in react component

【发布时间】：2020-07-04 05:13:04

【问题描述】：

我创建了一个 React 项目并为其添加了构造函数和渲染方法，在运行它时，我希望构造函数和渲染都只运行一次，但两者都运行了两次。第一个构造函数运行两次然后渲染。有人可以帮忙吗，我的其他生命周期方法也发生了同样的情况。

import React, Component from 'react';
class App extends Component 
  constructor(props) 
    super(props)
    console.log('Constructor')
  

  render() 
    console.log('render')
    return (
      <h1>My Favorite Color is </h1>
    );
  

export default App;

这是我的 index.js.. 它是如何被调用的

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

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

【问题讨论】：

组件是如何被调用的？

可能你正在渲染App 组件两次。

这是默认方式，我只有在使用 npx create-react-app 创建项目后才完成这些更改......

你能发布上面有问题的代码吗？

很正常，所以设计的。这回答了你的问题了吗？ ***.com/questions/48846289/…

【参考方案1】：

实际上，这是 React 文档中记录的 StrictMode 的预期行为。文档中解释说 React 有两个阶段，即 render 和 commit。未来，并发模式将尝试通过停止和重放一些生命周期函数（如渲染、构造函数等）来避免阻塞浏览器线程。严格模式有这个特性，它会重放这些生命周期方法。

React Docs 还说这些生命周期函数不应该包含任何副作用。有副作用会导致内存泄漏和无效的应用程序状态。

我个人的意见是，您应该保留文档中描述的安全生命周期功能的所有副作用。 Link to the specific section of the docs that explain this.

【参考方案2】：

我遇到了同样的问题，刚刚删除了 React.StrictMode，现在所有内容都只渲染一次。

【参考方案3】：

如果我替换下面的代码，它对我有用

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

通过下面的行（但上面的代码是我使用 create-react-app 命令创建项目时的默认代码。

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

【讨论】：

我也遇到了同样的问题，它可以作为您的解决方案。点赞。