ReactJs의 prevState란 무엇입니까?

ReactJs의 prevState란 무엇입니까?

질문하는 것은 어리석은 질문이라고 생각합니다만, 저는 리액트 JS에 초보자이기 때문에 누구라도 reactjS에 prevState를 사용하는 이유를 설명해 주실 수 있을까요?이해하려고 노력했지만 실패했습니다.

여기 제 코드가 있습니다.이해를 돕기 바랍니다.

 state = {
    placeName : '',
    places : []
}



placeSubmitHanlder = () => {
    if(this.state.placeName.trim()===''){
      return;
    }
    this.setState(prevState => {
      return {
        places : prevState.places.concat(prevState.placeName)
      };
    });
  };

prevState는 setState 콜백함수에 전달된 인수에 지정한 이름입니다.그것이 가지고 있는 것은 그 이전의 국가 가치이다.setStateReact; Swith에 의해 트리거되었습니다.setState는 배치 처리를 수행합니다.이전 상태 값을 기반으로 새로운 상태를 갱신할 때 이전 상태를 파악하는 것이 중요할 수 있습니다.

따라서 여러 setState 콜이 같은 상태를 갱신하고 있는 경우 setState 콜을 일괄 처리하면 잘못된 상태가 설정될 수 있습니다.예를 들어 보겠습니다.

state = {
   count: 0
}
updateCount = () => {
    this.setState({ count: this.state.count + 1});
    this.setState({ count: this.state.count + 1});
    this.setState({ count: this.state.count + 1});
    this.setState({ count: this.state.count + 1});
}

위의 코드에서는 카운트 값이 4가 될 것으로 예상되지만 실제로는 1이 됩니다.이는 setState에 대한 마지막 콜이 배치 중에 이전 값을 덮어쓰기 때문입니다.기능적인 setState를 사용하기 위한 해결 방법:

updateCount = () => {
    this.setState(prevstate => ({ count: prevstate.count + 1}));
    this.setState(prevstate => ({ count: prevstate.count + 1}));
    this.setState(prevstate => ({ count: prevstate.count + 1}));
    this.setState(prevstate => ({ count: prevstate.count + 1}));
}

현재 상태를 마지막 상태의 매개 변수로 재정의할 때 사용합니다.

React 문서에서:

React 문서에 따르면 "React는 여러 개를 일괄 처리할 수 있습니다.setState()1개의 업데이트를 호출하여 퍼포먼스를 향상시킵니다.왜냐면this.props그리고.this.state비동기적으로 업데이트될 수 있으므로 다음 상태를 계산할 때 해당 값을 사용하지 마십시오."

"수정하려면 두 번째 형식을 사용합니다.setState()오브젝트가 아닌 기능을 받아들입니다.이 함수는 첫 번째 인수로 이전 상태를 수신하고 업데이트가 두 번째 인수로 적용될 때의 소품을 수신합니다."

링크

상세한 것에 대하여는, 코멘트 아웃 코드가 기재된 데모를 참조해 주세요.http://codepen.io/PiotrBerebecki/pen/rrGWjm

constructor() {
  super();
  this.state = {
    value: 0
  }
}

대응 문서: https://facebook.github.io/react/docs/reusable-components.html#es6-classes

[React ES6 class] API는 getInitialState를 제외하고 React.createClass와 유사합니다.별도의 getInitialState 메서드를 제공하는 대신 컨스트럭터에서 자체 상태 속성을 설정합니다.

prevState는 어디서 왔습니까?

prevState는 setState api https://facebook.github.io/react/docs/component-api.html#setstate 에서 가져옵니다.

시그니처 기능(상태, 소품)으로 기능 통과도 가능합니다.이것은 값을 설정하기 전에 state+props의 이전 값을 참조하는 아토믹업데이트를 큐잉하는 경우에 도움이 됩니다.예를 들어 state의 값을 증가시킨다고 가정합니다.

this.setState(function(previousState, currentProps) {
  return {
     value: previousState.value + 1
  };
});

언급URL : https://stackoverflow.com/questions/54807454/what-is-prevstate-in-reactjs