javascript - 如何停止 render() 函数直到所有状态都被更新？

Question

下面的代码将调用 render() 函数三次。有没有办法等到 state 中的所有三个属性都被更新，然后只调用 render() 一次？也许我应该使用shouldComponentUpdate？我是 ReactJS 的新手。我不知道它会是什么样子。有什么想法吗？

import React from "react";

export default class MyClass extends React.Component {
  constructor() {
    super();
    this.state = {
      first: "value1",
      second: "value2",
      third: "value3"
    };
  }

  changeFirst() {
    setTimeout(() => {
      this.setState({ first: "somethingFirst" });
    }, 2000);
  }
  changeSecond() {
    setTimeout(() => {
      this.setState({ second: "somethingSecond" });
    }, 3500);
  }
  changeThird() {
    setTimeout(() => {
      this.setState({ third: "somethingThird" });
    }, 5000);
  }

  componentDidMount() {
    this.changeFirst();
    this.changeSecond();
    this.changeThird();
  }

  render() {
    return (
      <div>
        {console.log(this.state.first) +
          "\n" +
          console.log(this.state.second) +
          "\n" +
          console.log(this.state.third) +
          "\n"}{" "}
      </div>
    );
  }
}

Answer 1

是的，您可以使用shouldcomponentupdate

shouldComponentUpdate(nextProps, nextState){
    const { first, second, third } = this.state;
    if(first !== nextState.first && second !== nextState.second && third !== nextState.third){
        return true;
    }

    return false;
}

这将阻止组件更新，除非更新三个状态整体。