React组件API——setState 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组件API——setState】为了提高性能，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保持不变。