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'));