渲染組件時 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您可以對此進行測試