Какой подход хорош для обновления состояния компонента в реакции

Question

Вот рабочий пример в CodePen.

Имеет кнопку, которая переключается между ON и OFF

В React docs , он использовал prevState и обновил значение состояния.

    this.setState(prevState => ({
      isToggleOn: !prevState.isToggleOn
    }));

Он также дает тот же результат, когда я использую метод ниже.

    this.setState({isToggleOn: !this.state.isToggleOn})

Может кто-нибудь предложить какойЭто хороший способ и рекомендуется обновить State Component?

Answer 1

Из-за асинхронной природы setState не рекомендуется использовать this.state для получения предыдущего состояния в пределах setState. Вместо этого, если вам нужно использовать предыдущее состояние, используйте подход updateater .

Думайте о setState () как о запросе, а не как о немедленной команде для обновления компонента. Для лучшего восприятия производительности React может задержать ее, а затем обновить несколько компонентов за один проход. React не гарантирует, что изменения состояния будут применены немедленно. https://reactjs.org/docs/react-component.html#setstate

Answer 2

Как уже говорили другие, вы должны поступить так же, как в первом примере.

Редко, когда prevState => ({isToggleOn: !prevState.isToggleOn}) даст результат, отличный от {isToggleOn: !this.state.isToggleOn}, но это может произойти.

Обычно рекомендуется всегда использовать функцию обновления, когда вы устанавливаете новое состояние, которое зависит от значения старого состояния .

Вот два фрагмента, демонстрирующих, что может произойти:

Передача объекта в setState

Здесь, несмотря на увеличение счетчика в два раза с помощью setState, он увеличивается только на 1 каждый раз.

class App extends React.Component {
  constructor() {
    super();
    this.state = {counter: 0};
    this.increment = this.increment.bind(this);
  }
  
  increment() {
    this.setState({counter: this.state.counter + 1});
    this.setState({counter: this.state.counter + 1});
  }
  
  render() {
    return (
      <div>
        <h3>{this.state.counter}</h3>
        <button onClick={this.increment}>Increment</button>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("app"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="app"></div>

---

Передача функции в setState

Здесь счетчик корректно увеличивается на 2.

class App extends React.Component {
  constructor() {
    super();
    this.state = {counter: 0};
    this.increment = this.increment.bind(this);
  }
  
  increment() {
    this.setState(prevState => ({counter: prevState.counter + 1}));
    this.setState(prevState => ({counter: prevState.counter + 1}));
  }
  
  render() {
    return (
      <div>
        <h3>{this.state.counter}</h3>
        <button onClick={this.increment}>Increment</button>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("app"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="app"></div>