React组件API——setState

setState是React事件处理函数中和请求回调函数中触发UI更新的主要方法。

setState(object nextState[, function callback])

参数说明

nextState：将要设置的新状态，该状态会和当前的state合并
callback：可选参数，回调函数。该函数会在setState设置成功，且组件重新渲染后调用。
功能：合并nextState和当前state，并重新渲染组件。

使用setState有三个注意事项：

1、不要直接更新状态

// wrong
this.state.comment = 'Hello';

// right
this.setState({comment: 'hello'});  

上面直接修改this.state的数据，这样并不会渲染组件，通过下面的代码调用setState函数才是正确的方式。构造函数是唯一能够初始化 this.state 的地方。

2、状态的更新可能是异步的

// wrong
this.setState({
  count: this.state.count +1;
})

// right
this.setState((state) => ({
  count: state.count+1;
}))

// right
this.setState( function(state) {
  return {
    count: state.count+1;
  }
})

为了提高性能，React可能会将多个 setState() 调用合并成一个来调用，所以通过第一种方式可能计数器无法正常工作。解决方法是使得setState()接受一个函数而不是一个对象，下面两种函数调用的方法都是正确的。

3、状态更新合并

setState()调用是对状态更新进行合并，这种合并是浅合并，也就是说 this.setState({comments}) 完整保留了 this.state.posts，但完全替换了 this.state.comments。
而replaceState()调用就是将整个state进行替换操作。

constructor(props) {
    super(props);
    this.state = {
      posts: [],
      comments: []
    };
  }
componentDidMount() {
    fetchComments().then(response => {
      this.setState({
        comments: response.comments
      });
    });
  }

上述代码调用fetchComments()时，即更新了state中的comments字段，而posts保持不变。