javascript - 组件重新渲染时 'remaining' 代码执行会发生什么情况？

Question

使用 React.js，假设我有一个父组件，它有一个状态列表:

myList: [1, 2, 3]

我在 myList 上做了一个 .map() ，并为列表中的每个项目呈现一个新组件。所以我的父应用程序现在有子组件。

假设在这个子组件中，我运行了一个方法 myMethod ，并在此方法中间的某处更新父组件的 myList状态变量。

这将触发子组件(包括当前组件)的重新渲染(对吗？)，它正在执行 myMethod , 但尚未执行完此方法的所有行。

主要问题:

myMethod 内的任何剩余代码行会发生什么方法，在导致方法的组件重新呈现的行之后？

(它们仍然会被执行，还是会中止执行？比这更微妙的事情？)

Answer 1

setState 是异步的，因此它不会立即更新您的父组件状态。因此，方法 myMethod 中的剩余代码不会被中止。所有剩余的代码都会被执行，并且只有在更新了父组件状态之后才会触发重新渲染。而且，如果您愿意，还可以在相同的 myMethod 方法中更新子组件状态(在您对后端的 axios 请求得到解决之后)。

例如:

import React, { Component } from "react";
import ReactDOM from "react-dom";

const getRandomInt = (min, max) => {
  return Math.floor(Math.random() * (max - min + 1)) + min;
};

class Parent extends Component {
  state = {
    list: [1, 2, 3]
  };

  parentHandler = value => {
    this.setState({ list: [...this.state.list, value] }, () =>
      console.log("parent component state updated")
    );
  };

  render() {
    return (
      <div>
        {this.state.list.map(item => (
          <Child key={item} item={item} parentHandler={this.parentHandler} />
        ))}
      </div>
    );
  }
}

class Child extends Component {
  state = {
    id: 24
  };

  fakePromsise = () => {
    const newId = getRandomInt(24, 60);
    return new Promise((resolve, reject) => {
      setTimeout(() => resolve(newId), 5000);
    });
  };

  childHandler = listItem => {
    let newItem = listItem + getRandomInt(10, 1000);
    // handling parent state
    this.props.parentHandler(newItem);
    // handling fake promise
    // and when the promise resolves
    // update the component state
    this.fakePromsise().then(data =>
      this.setState(
        {
          id: data
        },
        () => console.log("child component state updated")
      )
    );
    // after the loop completes
    // parent state is updated
    for (let i = 0; i < 5000; i++) {
      console.log("i", i);
    }
  };

  render() {
    return (
      <div>
        <h1 onClick={() => this.childHandler(this.props.item)}>
          {this.props.item} click me!!!
        </h1>
        <p>Id: {this.state.id}</p>
      </div>
    );
  }
}

ReactDOM.render(<Parent />, document.getElementById('root'));

you can use the example and see the console result. Just click the h1 tag. After which new Child component is added and the clicked Child component id is changed.