In React why does a child component's render function get called twice?

问题

I have the simplest of apps. There's a parent <App> component and a child <MyChildOne> component. Both are class-based.

Can anyone please explain why React calls the render function of child <MyChildOne> twice?

Here's my <App> code:

import React from "react";
import "./App.css";
import MyChildOne from "./MyChildOne.js";

class App extends React.Component {
  render() {
    return (
      <div>
        <MyChildOne />
      </div>
    );
  }
}
export default App;

And here's my <MyChildOne> code:

import React from "react";

class MyChildOne extends React.Component {
  counter = 0;

  render() {
    this.counter = this.counter + 1;

    console.log(
      "Code has called MyChildOne and this.counter has value: " + this.counter
    );

    return <h1>Hello, {this.counter}</h1>;
  }
}

export default MyChildOne;

The output in the browser is this:

Hello, 1

And here's what gets logged in the console:

Code has called MyChildOne and this.counter has value: 1

Code has called MyChildOne and this.counter has value: 2

So clearly React is calling the render function of <MyChildOne> twice – but I cannot understand why!!!!

This is no good to me because I want to pass as props an array of things from <App> to <MyChildOne> and I want <MyChildOne> to render, let's say, an <h1> for every 'thing' member of that array. I do not want the <h1>s to be rendered twice!

回答1:

You shouldn't worry too much about the render function being called multiple times. If you're creating logic that depends on the render function being called multiple times, you're most likely doing something wrong. My best would be that you're doing some other logic that causes the render function to being called multiple times.

You should note that if your parent component re-renders, so does your child component. I created a minimal example of the code you provided, which makes it clear that your issue is somewhere else. https://codesandbox.io/s/react-example-6ud9d

回答2:

I'm not sure why but this is only happening in the strict mode. I create an example project with the same code you showed. Try removing the React.StrictMode tag in index.js file. You'll see that MyChildOne component is only rendering once.

Also, if you're gonna set a property inside the class and use it inside the render method, you should use the state. Like this,

 state = {
     counter: 0
  }

. And Change the state like this,

this.setState({counter: this.state.counter + 1});

It'll re-render you component properly. But never change the state inside of render method; it'll break your code.

If you don't want to use the state and lifecycle methods, don't use class components. Use functional components instead.

来源：https://stackoverflow.com/questions/61138766/in-react-why-does-a-child-components-render-function-get-called-twice

标签

javascript

reactjs

components

render