Question

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

-我卸载了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

Answer 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

Answer 2

要在反应中删除不必要的渲染，可以将PureComponent用于Component类，将React.memo()用于功能Component。

这将检查道具是否更改，如果仅道具更改，则重新渲染组件。当parent频繁触发不影响孩子的状态更改时，这很有用。

生命周期方法在初始渲染和重新渲染阶段被称为Twice

2 个答案: