입문

React의 setState는 두 가지 방법이 있는데 하나는 대상을 매개 변수에 전달하는 것이고 다른 하나는 전달 함수입니다. 우리는 이 두 가지 방법이 어떻게 다른지 정리했습니다.

setState 정보

setState () 스케줄링 구성 요소의state 대상이 업데이트됩니다.state를 업데이트하면 구성 요소는 다시 렌더링하여 응답합니다.
setState 호출은 비동기적입니다.호출 후 바로this를 보냅니다.state가 새 값을 반영하기를 기대하지 마십시오.현재state에 기반한 값을 계산해야 한다면, 대상을 대체하기 위해 업데이트 함수를 전달합니다.

총결산

setState의 호출은 비동기적입니다

setState () 는 대상이 변수로 전달되는 상황에서state를 즉시 업데이트할 수 없습니다

현재state에 의존하는 값을 업데이트하는 상황에서 대상이 아닌 변수에 함수를 전달합니다

함수를 매개 변수에 전달하면 이 함수에서 현재state 값에 접근할 수 있습니다

예제 코드

App.js

import React from 'react';

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      counter1: 0,
      counter2: 0,
    };
    this.doAction1 = this.doAction1.bind(this);
    this.doAction2 = this.doAction2.bind(this);
  }

  // 引数にオブジェクトを渡した場合
  // これは +1 ずつ増えて正しくない挙動が起きる。
  doAction1() {
    this.setState({
      counter1: this.state.counter1 + 1,
    });
    this.setState({
      counter1: this.state.counter1 + 1,
    });
  }

  // 引数に関数を渡した場合
  // これは +2 ずつ増えて正しい処理をする。
  // 1つの関数内で state の更新を連続的に行うときは、引数に関数を渡す。
  doAction2() {
    this.setState(state => ({
      counter2: state.counter2 + 1,
    }));
    this.setState(state => ({
      counter2: state.counter2 + 1,
    }));
  }

  render() {
    const {counter1, counter2} = this.state;
    return (
        <div>
          <p>引数にオブジェクトを渡した場合:{counter1}</p>
          <button onClick={this.doAction1}>Click</button>

        <hr />

          <p>引数に関数を渡した場合:{counter2}</p>
          <button onClick={this.doAction2}>Click</button>
        </div>
    );
  }
}

export default App;

出力結果↓

모든 것이 공식 홈페이지에 쓰여 있다

state 및 라이프 사이클

React.Component

구성 요소 시작