React State Updates are Merged?怎么理解？

Question

State Updates are Merged

When you call setState(), React merges the object you provide into the current state.

For example, your state may contain several independent variables:

constructor(props) {
    super(props);
    this.state = {
      posts: [],
      comments: []
    };
  }

Then you can update them independently with separate setState() calls:

componentDidMount() {    fetchPosts().then(response => {      this.setState({        posts: response.posts
      });
    });    fetchComments().then(response => {      this.setState({        comments: response.comments
      });
    });
  }

The merging is shallow, so this.setState({comments}) leaves this.state.posts intact, but completely replaces this.state.comments.

这个意思是多个state分开更新，会在合并之后然后执行render() 而不是更新一个state render()一次？
这么理解有问题么？

Answer 1

这个的意思是指，setState方法在执行时，会作多个要更动state的合并，以及有类似异步的处理，这是React中隐性的运行机制，目的主要是为了优化与性能。分离的那个代码示例，是因为起了两个不同的异步，所以会让两个setState方法分开运行。关于setState方法，可以参考我写的这篇文章: 为何说setState方法是异步的？