示例

对React应用程序进行UI更新的主要方式是通过调用setState()函数。此函数将在您提供的新状态和先前状态之间执行浅表合并，并触发组件和所有后代的重新呈现。

参数

1. updater：它可以是具有许多键值对的对象，应将其合并到状态中，也可以是返回此类对象的函数。

2. callback (optional)：setState()成功执行后将执行的功能。由于setState()React不能保证to的调用是原子的，因此如果您想在成功执行后肯定要执行某些操作，这有时会很有用setState()。

用法：

该setState方法接受一个updater参数，该参数可以是具有许多应合并到状态中的键值对的对象，也可以是返回从prevState和计算得到的对象的函数props。

setState()与对象一起使用updater

//
// 一个示例ES6样式组件，只需单击一次按钮即可更新状态。
// 还演示了可以在何处直接设置状态以及应在何处使用setState。
//
class Greeting extendsReact.Component{
    constructor(props) {
        super(props);
       this.click= this.click.bind(this);
        // 设置初始状态（仅允许在CONSTRUCTOR中使用）
       this.state= {
            greeting: 'Hello!'
        };
    }
    click(e) {
        this.setState({
              greeting: 'Hello World!'
        });
    }
    render() {
        return(
            <div>
                <p>{this.state.greeting}</p>
                <button onClick={this.click}>Click me</button>
            </div>
        );
    }
    
}

setState()与功能配合使用updater

//
// 当您要检查或使用时最常用 
// 更新任何值之前的状态。
//

this.setState(function(previousState, currentProps) {
  return {
    counter:previousState.counter+ 1
  };
});

这比使用对象参数（其中使用多次调用）更安全setState()，因为React可能将多个调用批处理在一起并立即执行，这是使用当前道具设置状态时的首选方法。

this.setState({ counter: this.state.counter + 1 });
this.setState({ counter: this.state.counter + 1 });
this.setState({ counter: this.state.counter + 1 });

这些调用可以由React使用进行批量处理，从而使计数器增加1而不是3。Object.assign()

功能方法还可以用于将状态设置逻辑移到组件之外。这允许隔离和重用状态逻辑。

// 在组件类之外，可能在另一个文件/模块中

function incrementCounter(previousState, currentProps) {
    return {
        counter:previousState.counter+ 1
    };
}

// 在组件内

this.setState(incrementCounter);

调用setState()与物体的回调函数

//
// setState完成后，“ Hi There”将记录到控制台
//

this.setState({ name: 'John Doe' }, console.log('Hi there'));