渲染组件时 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'));

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

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

Answer 1

这是完全正常的。

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

您可能没有看到，但您的组件会none在red.