React 컴포넌트에서 this.setState를 여러 번 사용하면 어떻게 되나요?

React 컴포넌트에서 this.setState를 여러 번 사용하면 어떻게 되나요?

---

this.setState를 여러 번 사용할 때 어떤 일이 발생하는지 확인하고 싶었습니다 (토론을 위해 두 번). 구성 요소가 두 번 렌더링 될 것이라고 생각했지만 분명히 한 번만 렌더링되었습니다. 내가 가진 또 다른 기대는 setState에 대한 두 번째 호출이 첫 번째 호출을 통해 실행될 수 있다는 것이었지만 당신은 그것을 추측했습니다.

JSfiddle에 연결

var Hello = React.createClass({
  render: function() {
    return (
      <div>
        <div>Hello {this.props.name}</div>
        <CheckBox />
      </div>
    );
  }
});

var CheckBox = React.createClass({
  getInitialState: function() {
    return {
      alex: 0
    };
  },

  handleChange: function(event) {
    this.setState({
      value: event.target.value
    });
    this.setState({
      alex: 5
    });
  },

  render: function() {
    alert('render');
    return (
      <div>
        <label htmlFor="alex">Alex</label>
        <input type="checkbox" onChange={this.handleChange} name="alex" />
        <div>{this.state.alex}</div>
      </div>
    );
  }
});

ReactDOM.render(
  <Hello name="World" />,
  document.getElementById('container')
);

보시다시피 '렌더링'이라는 경고가 렌더링 할 때마다 팝업됩니다.

제대로 작동하는 이유에 대한 설명이 있습니까?

---

React는 이벤트 핸들러 및 수명주기 메서드에서 발생하는 상태 업데이트를 일괄 처리합니다. 따라서 <div onClick />핸들러 에서 상태를 여러 번 업데이트하면 React는 다시 렌더링하기 전에 이벤트 처리가 완료 될 때까지 기다립니다.

To be clear, this only works in React-controlled synthetic event handlers and lifecycle methods. State updates are not batched in AJAX and setTimeout event handlers, for example.

---

The setState() method does not immediately update the state of the component, it just puts the update in a queue to be processed later. React may batch multiple update requests together to make rendering more efficient. Due to this, special precautions must be made when you try to update the state based on the component's previous state.

For example, the following code will only increment the state value attribute by 1 even though it was called 4 times:

 class Counter extends React.Component{
   constructor(props){
     super(props)
    //initial state set up
     this.state = {value:0}
   }
   componentDidMount(){
    //updating state
    this.setState({value:this.state.value+1})
    this.setState({value:this.state.value+1})
    this.setState({value:this.state.value+1})
    this.setState({value:this.state.value+1})
   }
   render(){
    return <div>Message:{this.state.value}</div>
   }
}

In order to use a state after it has been updated, do all logic in the callback argument:

//this.state.count is originally 0
this.setState({count:42}, () => {
  console.log(this.state.count)
//outputs 42
})

The setState(updater,[callback]) method can take in an updater function as its first argument to update the state based on the previous state and properties. The return value of the updater function will be shallowly merged with the previous component state. The method updates the state asynchronously, so a there is an option callback that will be called once the state has finished updating completely.

Example:

this.setState((prevState, props) => { 
return {attribute:"value"}
})

Here is an example of how to update the state based on previous state:

    class Counter extends React.Component{
      constructor(props) {
        super(props)
    //initial state set up
        this.state = {message:"initial message"}
    }
      componentDidMount() {
    //updating state
        this.setState((prevState, props) => {
          return {message: prevState.message + '!'}
        })
     }
     render(){
       return <div>Message:{this.state.message}</div>
     }
  }

참고URL : https://stackoverflow.com/questions/33613728/what-happens-when-using-this-setstate-multiple-times-in-react-component