渲染组件时 React 调用 api 运行两次

Question

我一直在研究反应和搜索，但没有找到任何答案。
所以我有这个组件，它调用我的 api 来知道在呈现它时要做什么。
问题是它被渲染了两次，我想知道这是否可以，因为我告诉组件自我更新或者我做错了什么。
从我搜索的内容来看，如果 setState 被调用，渲染会运行，但我仍然觉得这有点奇怪，也许是因为我是 React 的新手，但我想把事情弄清楚。

例子：

class Car extends React.Component {
  constructor() {
    super();
    this.state = {
      color:'none',
    };
  }

  componentDidMount(){
    this.updateColor();
  }

  updateColor() {
    this.setState(() => {
      return { color: 'red'}
    });
  }

  render() {
    console.log("potatoes");
    return (
      <div>        
        <h1>Car color: {this.state.color}</h1>
      </div>
    );
  }
}

React.render(<Car />, document.getElementById('app'));

代码笔链接：
https://codepen.io/jorgemdss/pen/qBEqroE?editors=0010

如果您打开开发工具，您会看到“土豆”被记录了两次。
这是完全正常的还是我做错了什么？

Answer 1

这是完全正常的。

第一次渲染是在组件安装时，第二次是在它运行componentDidMount并调用updateColor更新状态并再次渲染它。

您可能没有看到，但您的组件将在red之后渲染none 。

Answer 2

这是正常的，因为在第一次渲染时，它以“none”的值呈现，而在第二次渲染时，它以“红色”的值呈现。

如果您注释掉setState ，您将看到该组件仅呈现一次。

运行此代码时，您将看到如下日志。

class Car extends React.Component {
  constructor() {
    super();
    this.state = {
      color:'none',
    };
  }

  componentDidMount(){
    this.updateColor();
  }

  updateColor() {
    this.setState(() => {
      return { color: 'red'}
    });
  }

  render() {
    console.log(this.state.color); //change potatoes to this.state.color
    return (
      <div>        
        <h1>Car color: {this.state.color}</h1>
      </div>
    );
  }
}

React.render(<Car />, document.getElementById('app'));

控制台日志

"none"
"red"

Answer 3

我不喜欢 React，但在用你的 codepen 测试之后，我认为它是：第一次执行代码是因为React.render(<Car />, document.getElementById('app')); 然后在 State 改变后，Page 会再次自动渲染。

如果您将this.state.color添加到 console.log 和/或 commentOut setState您可以对此进行测试