React는 상태 업데이트 순서를 유지합니까?

React는 상태 업데이트 순서를 유지합니까?

React는 성능 최적화를 위해 상태 업데이트를 비동기적으로 일괄적으로 수행할 수 있습니다., 「신뢰할 수 없다」라고 하는 은, 「할 수 라고 하는 .setState그러나 React가 호출된 순서대로 상태를 업데이트 할 수 있는지 여부를 확인할 수 있습니까?

1. 같은 컴포넌트?
2. 다른 컴포넌트?

다음 예에서는 버튼을 클릭하는 것을 검토해 주십시오.

1. a가 false이고 b가 true일 가능성이 있습니까?

class Container extends React.Component {
  constructor(props) {
    super(props);
    this.state = { a: false, b: false };
  }

  render() {
    return <Button onClick={this.handleClick}/>
  }

  handleClick = () => {
    this.setState({ a: true });
    this.setState({ b: true });
  }
}

2. a가 false이고 b가 true일 가능성이 있습니까?

class SuperContainer extends React.Component {
  constructor(props) {
    super(props);
    this.state = { a: false };
  }

  render() {
    return <Container setParentState={this.setState.bind(this)}/>
  }
}

class Container extends React.Component {
  constructor(props) {
    super(props);
    this.state = { b: false };
  }

  render() {
    return <Button onClick={this.handleClick}/>
  }

  handleClick = () => {
    this.props.setParentState({ a: true });
    this.setState({ b: true });
  }
}

이는 사용 사례를 매우 단순하게 만든다는 점에 유의하십시오.예를 들어 예 1의 두 상태 파라미터를 동시에 업데이트하거나 예 2의 첫 번째 상태 업데이트 콜백으로 두 번째 상태 업데이트를 수행하는 등 다른 방법으로 이를 수행할 수 있습니다.다만, 이것은 제 질문이 아닙니다.Resact가 이러한 상태 갱신을 실행하는 명확한 방법이 있는지 여부만 알고 싶습니다.다른 것은 없습니다.

문서로 뒷받침된 답변을 주시면 대단히 감사하겠습니다.

리액트 담당입니다.

TLDR:

그러나 Respect가 setState가 호출된 것과 같은 순서로 상태를 갱신할 수 있다고 생각하십니까?

• 같은 컴포넌트?

네.

• 다른 컴포넌트?

네.

업데이트 순서는 항상 존중됩니다.중간 상태를 "사이의"로 볼 수 있는지 여부는 사용자가 일괄적으로 안에 있는지 여부에 따라 달라집니다.

React 17 이전 버전에서는 기본적으로 React 이벤트 핸들러 내의 업데이트만 일괄 처리됩니다.드물게 필요할 때 이벤트 핸들러 외부에서 일괄 처리를 강제하는 불안정한 API가 있습니다.

React 18부터는 기본적으로 모든 업데이트를 일괄 처리합니다.React는 두 개의 다른 의도적인 이벤트(클릭 또는 입력 등)에서 업데이트를 일괄 처리하지 않으므로 예를 들어 두 개의 다른 버튼을 클릭해도 일괄 처리되지 않습니다.드물게 배치 처리가 바람직하지 않은 경우 를 사용할 수 있습니다.

---

이를 이해하기 위한 열쇠는 React 이벤트핸들러 내에서 실행하는 컴포넌트의 수에 관계없이 이벤트 종료 시 생성되는 것은1개의 리렌더뿐이에요이는 대규모 애플리케이션에서의 뛰어난 퍼포먼스에 매우 중요합니다.Child ★★★★★★★★★★★★★★★★★」Parent 콜 " " "setState() 이벤트를때, 이 를 다시 않습니다.Child 번

예 모두 " " " 입니다.setState()반응하다따라서 이벤트 종료 시 항상 함께 플러시됩니다(중간 상태는 표시되지 않습니다).

업데이트는 항상 발생하는 순서대로 얄팍하게 병합됩니다.첫 번째 업데이트가{a: 10} 번째가 '네'입니다{b: 20} 번째가 '세 번째'입니다{a: 30}는 '다니다'가 됩니다{a: 30, b: 20}키에 대한 " " " " 등)a'어느 쪽인가'는 '어느끼다

this.state개체는 배치 종료 시 UI를 다시 렌더링하면 업데이트됩니다.따라서 이전 등에인 """""""""""""""""""""""""""""""""""""""""" 를 합니다""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""setState(fn)알 수입니다.this.state그 이유가 궁금하시면 제가 이 댓글로 자세히 설명을 해드렸는데요.

---

이 예에서는 배치 처리가 네이블로 되어 있는 React 이벤트핸들러 내에 있기 때문에(이벤트를 종료할 때 React가 「알 수 있기」 때문에) 「중간 상태」는 표시되지 않습니다.

단, React 17 이전 버전에서는 모두 React 이벤트핸들러 이외에서는 디폴트로 배치되지 않았습니다.이 예에서 AJAX 응답 핸들러가 있는 경우handleClick각, 각, 에러뷰트setState()즉시 처리될 것입니다.이 경우 React 17 이전의 중간 상태가 표시됩니다.

promise.then(() => {
  // We're not in an event handler, so these are flushed separately.
  this.setState({a: true}); // Re-renders with {a: true, b: false }
  this.setState({b: true}); // Re-renders with {a: true, b: true }
  this.props.setParentState(); // Re-renders the parent
});

이벤트 핸들러 유무에 따라 동작이 달라지는 것은 불편하다는 것을 알고 있습니다.React 18에서는 더 이상 이것이 필요하지 않습니다.그러나 그 이전에는 일괄 처리를 강제하기 위해 사용할 수 있는 API가 있었습니다.

promise.then(() => {
  // Forces batching
  ReactDOM.unstable_batchedUpdates(() => {
    this.setState({a: true}); // Doesn't re-render yet
    this.setState({b: true}); // Doesn't re-render yet
    this.props.setParentState(); // Doesn't re-render yet
  });
  // When we exit unstable_batchedUpdates, re-renders once
});

이벤트핸들러는 "Respect"로 .unstable_batchedUpdates그게 바로 그들이 기본적으로 묶여있는 이유야.은 데음음음음음음음음음음음 an an an an an로 .unstable_batchedUpdates두 번으로는 효과가 없습니다.는 가장 .unstable_batchedUpdatesdiscl.discl.discl을 클릭합니다.

이 API는 18세 이후(19세 이상) 메이저버전에서는 삭제될 것이라는 점에서 불안정합니다.React 이벤트핸들러 이외의 경우에 일괄 처리를 강제할 필요가 있는 경우는 React 18까지 안전하게 신뢰할 수 있습니다.리액트 18을 사용하면 효과가 없어지기 때문에 제거할 수 있습니다.

---

요약하자면, Respect는 기본적으로 내부 이벤트 핸들러에만 배치되었기 때문에 이는 혼란스러운 주제입니다.그러나 해결책은 배치를 줄이는 것이 아니라 기본적으로 더 많은 배치를 수행하는 것입니다.그게 리액트 18에서 우리가 하는 일이야

이것은 사실 꽤 흥미로운 질문이지만 답은 너무 복잡하지 않을 것이다.매체에 대한 이 위대한 기사가 있는데, 그 해답이 있다.

1) 이렇게 하면

this.setState({ a: true });
this.setState({ b: true });

그런 상황은 없을 것 같아요.a될 것이다true그리고.b될 것이다false일괄 처리 때문에.

다만, 의존하게 되면, 실제로 기대했던 상태를 얻을 수 없는 경우가 있을 수 있습니다.

// assuming this.state = { value: 0 };
this.setState({ value: this.state.value + 1});
this.setState({ value: this.state.value + 1});
this.setState({ value: this.state.value + 1});

의 this.state.value1 을 3 을 1 을 1로 하다

되어 있습니다.setState accepts a function as its parameter

// assuming this.state = { value: 0 };
this.setState((state) => ({ value: state.value + 1}));
this.setState((state) => ({ value: state.value + 1}));
this.setState((state) => ({ value: state.value + 1}));

하면 가 알 수 있습니다.this.state.value === 3

같은 사이클 내의 여러 콜을 일괄 처리할 수 있습니다.예를 들어, 동일한 사이클에서 항목 수량을 두 번 이상 늘리려고 하면 다음과 같습니다.

Object.assign(
  previousState,
  {quantity: state.quantity + 1},
  {quantity: state.quantity + 1},
  ...
)

https://reactjs.org/docs/react-component.html

문서와 같이

setState()는 컴포넌트 상태에 대한 변경을 큐잉하고 React에 이 컴포넌트와 그 자식의 상태를 갱신하여 다시 렌더링해야 함을 알립니다.이는 이벤트 핸들러 및 서버 응답에 대한 응답으로 사용자 인터페이스를 업데이트하기 위해 사용하는 기본 방법입니다.

큐(FIFO: First In First Out)와 같이 변경을 프리폼합니다.

이 경우 그렇지 않습니다.3개의 박스와 상태 및 핸들클릭

const [openedIndex, setOpenedIndex] = useState(-1);
const handleClic = (index) => {
console.log("opened index to test delayed state update", openedIndex);
if (index === openedIndex) {
  setOpenedIndex(-1);
} else {
  setOpenedIndex(index);
}
};

클릭해서 열고 닫으면 다음과 같이 동작합니다.

하고, 「」를 실행하고 경우.$0.click()

「」를 실행하고 있는 경우는 어떻게 .$0.click() 해야 않아요.

유사한 게시물: Reactjs에서 변경된 드롭다운에 대한 데이터 업데이트가 onClick으로 지연됩니다. 그러나 onDoubleClick은 React 구성 요소에서 무시됩니다.

언급URL : https://stackoverflow.com/questions/48563650/does-react-keep-the-order-for-state-updates