state的理解

针对state要明确三件事：
1.不要直接修改state

// 错的
this.state.name = 'alice';

应该使用setState()

// 正确
this.setState({
	name: 'alice'
});

注意：构造函数是唯一可以给this.state赋值的地方

  constructor(props) {
    super(props);
    this.state = {
		name: 'alice'
	};
  }

2.state的更新可能是异步的

setState()函数是异步的，因此，更新数据时可能会异步更新。所以不要依赖要更新的值去更新下一个状态。

要解决这个问题，可以让 setState() 接收一个函数而不是一个对象。
这个函数用上一个 state 作为第一个参数，将此次更新被应用时的 props 做为第二个参数：

// 正确
this.setState((state, props) => ({
  counter: state.counter + props.increment
}));

3.state的更新会被合并

当调用setState()的时候，React会把提供的对象合并到当前的state。

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

分开更新

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

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

这里的合并是浅合并，所以 this.setState({comments}) 完整保留了 this.state.posts， 但是完全替换了 this.state.comments