programing

setState in reactjs가 Sync가 아닌 비동기인 이유는 무엇입니까?

magicmemo 2023. 3. 27. 21:10
반응형

setState in reactjs가 Sync가 아닌 비동기인 이유는 무엇입니까?

하는 것을 했다.this.setState()임의의 컴포넌트의 함수는 비동기이거나 호출된 함수의 완료 후에 호출됩니다.

이 블로그를 검색해 보니 (setState() 상태 변환 조작이 동기 인 리액트일 수 있음)JS)

는 는 here here here here here here here here here here here here here.setState는 상태변화가 트리거된 방법에 따라 비동기(스택이 비어 있을 때 호출됨) 또는 동기(콜됨과 동시에 호출됨)입니다.

이 두 가지는 소화하기 어렵다.

  1. 블로그에서setState.updateState 무엇이 가 됐는지.updateState함수는 호출된 함수로서는 알 수 없는 것입니다.
  2. 은 왜 why를 ?setStateJS는 단일 스레드 언어이며 이 setState는 WebAPI 또는 서버 콜이 아니므로 JS의 스레드에서만 수행되어야 합니다.Re-Rendering이 모든 이벤트 청취자 및 기타 작업을 중지하지 않도록 하기 위해 이 작업을 수행합니까? 른른른른 른른른 른른 른른 ???른 른른?

상태 값이 업데이트되면 함수를 호출할 수 있습니다.

this.setState({foo: 'bar'}, () => { 
    // Do something here. 
});

에 갱신할 는, .setState:

대신:

this.setState({foo: "one"}, () => {
    this.setState({bar: "two"});
});

다음 작업을 수행합니다.

this.setState({
    foo: "one",
    bar: "two"
});

1)setState액션은 비동기적이며 성능 향상을 위해 배치됩니다.은 ''에 되어 있습니다.setState.

setState()는 this.state를 즉시 변환하지 않고 보류 상태의 천이를 만듭니다.이 메서드를 호출한 후 this.state에 액세스하면 기존 값이 반환될 수 있습니다.setState에 대한 콜의 동기 동작은 보증되지 않으며 성능 향상을 위해 콜이 배치될 수 있습니다.


이고, 이 2) JS는 "setState" "setState" "setState" "setState" "setState" "setState" "setState"는 왜 합니까?setStateWebAPI는?

그 이유는setState상태를 변경하고 재렌더링을 일으킵니다.이 작업은 비용이 많이 들고 동기화가 되면 브라우저가 응답하지 않을 수 있습니다.

따라서 setState 콜은 비동기적이며 UI 익스피리언스와 퍼포먼스를 향상시키기 위해 배치됩니다.

오래된 질문인 것은 알지만, 저를 포함한 많은 reactjs 사용자에게 오랫동안 많은 혼란을 주고 있습니다. Dan 의 Dan Abramov)는 【Dan Abramov】의 .setState★★★★★★★★★★★★★★★★★★:

https://github.com/facebook/react/issues/11527#issuecomment-360199710

setStateDan Abramov의 링크된 설명에는 비동기적인 것이 몇 가지 타당한 이유가 있습니다.이것은, 항상 비동기인 것은 아니고, 주로 동기라고는 할 수 없다는 것을 의미합니다.ReactJs는 상태를 변경하는 시나리오의 많은 변수를 고려하여 언제가 적절한지 판단합니다.state실제로 업데이트되고 컴포넌트가 다시 렌더링됩니다.
「」를 , 「」를 해 주세요.setState액션에 으로, 「」는 「」를 참조해 주세요.state할 수 만).하면 지연을 느낄 수 없습니다.setStateAjax 콜 응답 또는 사용자에 의해 트리거되지 않은 기타 이벤트에 대한 응답으로 사용자는 실제로 이 지연을 느끼지 않기 때문에 약간의 지연으로 상태가 갱신될 수 있습니다.또한 여러 상태 업데이트를 일괄 처리하여 DOM을 재렌더하는 횟수를 줄임으로써 퍼포먼스가 향상됩니다.

여기 좋은 기사 https://github.com/vasanthk/react-bits/blob/master/patterns/27.passing-function-to-setState.md

// assuming this.state.count === 0
this.setState({count: this.state.count + 1});
this.setState({count: this.state.count + 1});
this.setState({count: this.state.count + 1});
// this.state.count === 1, not 3

Solution
this.setState((prevState, props) => ({
  count: prevState.count + props.increment
}));

콜백을 패스합니다.this.setState ({.....},callback)

https://medium.com/javascript-scene/setstate-gate-abc10a9b2d82 https://medium.freecodecamp.org/functional-setstate-is-the-future-of-react-374f30401b6b

다음 랩을 사용하여 동기 호출을 할 수 있습니다.

this.setState((state =>{
  return{
    something
  }
})

네, setState()는 비동기입니다.

링크: https://reactjs.org/docs/react-component.html#setstate

  • React는 상태 변경이 즉시 적용되는 것을 보증하지 않습니다.
  • setState()는 항상 컴포넌트를 즉시 업데이트하지 않습니다.
  • setState()는 컴포넌트를 업데이트하기 위한 즉각적인 명령어가 아니라 요청으로 간주합니다.

은 그렇게 생각하기 때문이다.
링크: https://github.com/facebook/react/issues/11527#issuecomment-360199710

setState()의 동기 재렌더링은 많은 경우 비효율적이라는 데 동의합니다.

setState()는 setState()로 지정합니다.
치 않은 문제: 렌더링 로직 ) - 렌더링: 렌더링 지연 또는 렌더링 없음(프로그램 로직 기준)
합니다. - 매개 변수 전달이 중요합니다.
다른 문제들 중에서요.

다음 예시는 도움이 됩니다.

// call doMyTask1 - here we set state
// then after state is updated...
//     call to doMyTask2 to proceed further in program

constructor(props) {
    // ..

    // This binding is necessary to make `this` work in the callback
    this.doMyTask1 = this.doMyTask1.bind(this);
    this.doMyTask2 = this.doMyTask2.bind(this);
}

function doMyTask1(myparam1) {
    // ..

    this.setState(
        {
            mystate1: 'myvalue1',
            mystate2: 'myvalue2'
            // ...
        },    
        () => {
            this.doMyTask2(myparam1); 
        }
    );
}

function doMyTask2(myparam2) {
    // ..
}

도움이 됐으면 좋겠다.

일부 컴포넌트에서 카운터를 증가시킨다고 가정합니다.

  class SomeComponent extends Component{

    state = {
      updatedByDiv: '',
      updatedByBtn: '',
      counter: 0
    }

    divCountHandler = () => {
      this.setState({
        updatedByDiv: 'Div',
        counter: this.state.counter + 1
      });
      console.log('divCountHandler executed');
    }

    btnCountHandler = () => {
      this.setState({
        updatedByBtn: 'Button',
        counter: this.state.counter + 1
      });
      console.log('btnCountHandler executed');
    }
    ...
    ...
    render(){
      return (
        ...
        // a parent div
        <div onClick={this.divCountHandler}>
          // a child button
          <button onClick={this.btnCountHandler}>Increment Count</button>
        </div>
        ...
      )
    }
  }

상위 및 하위 구성 요소 모두에 카운트 핸들러가 연결되어 있습니다.이는 같은 클릭이벤트 버블링 컨텍스트 내에서 setState()를 2회 실행할 수 있도록 의도된 것입니다만, 2개의 핸들러 내에서 실행할 수 있습니다.

버블링 단계 동안 이벤트가 타깃에서 가장 바깥쪽 컨테이너로 버블링되므로 버튼 클릭 한 번으로 두 핸들러가 모두 트리거됩니다.

따라서 btnCountHandler()가 먼저 실행되고 카운트가 1로 증가하고 다음으로 divCountHandler()가 실행되며 카운트가 2로 증가합니다.

그러나 React Developer 도구에서 검사할 수 있는 카운트는 1로 증가합니다.

이것은 반응하는 것을 증명한다.

  • 모든 setState 콜을 큐잉합니다.

  • 컨텍스트의 마지막 메서드를 실행한 후 이 큐로 돌아갑니다(이 경우 divCountHandler).

  • 는, 같은 컨텍스트내의 복수의 setState 콜내에서 발생하는 모든 오브젝트 돌연변이를 1개의 오브젝트 변환 구문(예를 들면, 1개의 이벤트 단계내의 모든 메서드콜은 같은 컨텍스트)으로 Marge 합니다(이 때문에, 처음부터 setState()로 상태 속성을 개별적으로 갱신할 수 있기 때문에, 머지는 의미가 있습니다).

  • 여러 setState() 콜에 의한 재렌더링을 방지하기 위해 1개의 setState()로 전달합니다(이것은 배치에 대한 매우 기본적인 설명입니다).

반응으로 실행되는 코드:

this.setState({
  updatedByDiv: 'Div',
  updatedByBtn: 'Button',
  counter: this.state.counter + 1
})

이 동작을 정지하려면 오브젝트를 인수로서 setState 메서드에 전달하는 대신 콜백이 전달됩니다.

    divCountHandler = () => {
          this.setState((prevState, props) => {
            return {
              updatedByDiv: 'Div',
              counter: prevState.counter + 1
            };
          });
          console.log('divCountHandler executed');
        }

    btnCountHandler = () => {
          this.setState((prevState, props) => {
            return {
              updatedByBtn: 'Button',
              counter: prevState.counter + 1
            };
          });
      console.log('btnCountHandler executed');
    }

마지막 메서드는 실행이 종료된 후 setState 큐를 처리하기 위해 리액트가 복귀하면 큐에 있는 각 setState의 콜백을 호출하여 이전 컴포넌트 스테이트로 전달합니다.

이 방법으로 응답하면 큐 내의 마지막 콜백은 이전의 모든 콜백이 핸즈드한 상태를 갱신할 수 있습니다.

setState는 비동기입니다.이 문서에서 Reactjs의

모든 컴포넌트가 이벤트핸들러의 setState()를 호출할 때까지 의도적으로 "대기"하고 나서 재렌더를 시작합니다.이로 인해 불필요한 재렌더가 방지되어 성능이 향상됩니다.

그러나 React가 재렌더링 없이 바로 이 상태를 업데이트하지 않는 이유는 무엇인지 궁금할 수 있습니다.

그 이유는 소품과 상태 간의 일관성이 깨져 디버깅이 매우 어려운 문제가 발생하기 때문입니다.

상태 값의 변경에 따라 달라지는 경우에도 기능을 수행할 수 있습니다.

옵션 1: setState에서의 콜백 함수 사용

this.setState({
   value: newValue
},()=>{
   // It is an callback function.
   // Here you can access the update value
   console.log(this.state.value)
})

옵션 2: componentDidUpdate 사용 이 함수는 특정 클래스의 상태가 변경될 때마다 호출됩니다.

componentDidUpdate(prevProps, prevState){
    //Here you can check if value of your desired variable is same or not.
    if(this.state.value !== prevState.value){
        // this part will execute if your desired variable updates
    }
}

언급URL : https://stackoverflow.com/questions/36085726/why-is-setstate-in-reactjs-async-instead-of-sync

반응형

'programing' 카테고리의 다른 글

d3.contract 축의 날짜 처리  (0) 2023.03.27
Zend Framework가 AJAX 응답을 전송할 때 보기/레이아웃을 렌더링하지 않도록 하려면 어떻게 해야 합니까?  (0) 2023.03.27
여러 인수를 사용하여 Angular.js 필터를 호출하려면 어떻게 해야 합니까?  (0) 2023.03.27
반응의 getElementById  (0) 2023.03.27
CORS OPTIONS 사전 운항 요청 처리 방법에 대해 혼란스러움  (0) 2023.03.27

'programing'의 다른글

  • 현재글setState in reactjs가 Sync가 아닌 비동기인 이유는 무엇입니까?

관련글

댓글

티스토리툴바