setState()

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

参数

1. updater：它可以是一个具有多个键值对的对象，它们应该合并到状态或返回这样一个对象的函数中。
2. callback (optional)：在 setState() 成功执行后执行的功能。由于 React 不能保证对 setState() 的调用是原子的，所以如果你想在你成功执行 setState() 之后执行某些操作，这有时会很有用。

用法：

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

使用 setState() 和 Object 作为 updater

//
// An example ES6 style component, updating the state on a simple button click.
// Also demonstrates where the state can be set directly and where setState should be used.
//
class Greeting extends React.Component {
    constructor(props) {
        super(props);
        this.click = this.click.bind(this);
        // Set initial state (ONLY ALLOWED IN 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 is most often used when you want to check or make use 
// of previous state before updating any values.
//

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 使用 Object.assign() 一起批处理，导致计数器增加 1 而不是 3。

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

// Outside of component class, potentially in another file/module

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

// Within component

this.setState(incrementCounter);

使用 Object 和回调函数调用 setState()

//
// 'Hi There' will be logged to the console after setState completes
//

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