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。

Answer 2

这是正常现象，因为在第一个渲染中，其渲染值为“ none”，在第二个渲染中，其渲染值为“ red”。

如果您注释掉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'));

Console.log

"none"
"red"

Answer 3

我不喜欢React，但是在用您的Codepen测试之后，我认为是：第一次执行代码是因为React.render(<Car />, document.getElementById('app'));，然后在状态更改后，页面会自动再次呈现。

如果将this.state.color添加到console.log和/或注释掉setState

，可以对此进行测试。

呈现组件时，React调用api运行两次

3 个答案: