React의 setState 메커니즘에 대한 간략한 소개

이 글은 React의 setState 메커니즘에 대한 간략한 소개를 제공합니다. 이는 특정 참조 가치가 있습니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

api 분석: setState(updater, [콜백])

updater: 데이터 업데이트 FUNCTION/OBJECT
callback: 성공적인 업데이트 후 콜백 FUNCTION

// updater - Function
this.setState((prevState, props) => {
  return {counter: prevState.counter + props.step};
});

// update - Object
this.setState({quantity: 2})

setState의 특징:

1. 업데이트해야 하는 구성 요소를 일괄적으로 업데이트한 다음 렌더링 성능을 보장하기 위해 한꺼번에 업데이트합니다
2. 얕은 병합 Objecr.sign()

문제 및 솔루션

setState를 사용하여 상태를 변경한 후 즉시 this.state를 통해 최신 상태를 가져옵니다.
해결 방법: componentDidUpdate 또는 setState의 콜백 함수에서

// setState回调函数
changeTitle: function (event) {
  this.setState({ title: event.target.value }, () => this.APICallFunction());
},
APICallFunction: function () {
  // Call API with the updated value
}

를 가져옵니다. 업데이트하려면 개체 메서드를 사용하여 두 번 누적해야 한다는 요구 사항이 있습니다.
해결 방법: 업데이터 기능을 사용하세요

onClick = () => {
    this.setState({ index: this.state.index + 1 });
    this.setState({ index: this.state.index + 1 });
}

// 最后解析为,后面的数据会覆盖前面的更改，所以最终只加了一次.
Object.assign(
  previousState,
  {index: state.index+ 1},
  {index: state.index+ 1},
)

//正确写法
onClick = () => {
    this.setState((prevState, props) => {
      return {quantity: prevState.quantity + 1};
    });
    this.setState((prevState, props) => {
      return {quantity: prevState.quantity + 1};
    });
}

권장 사항:

1. shouldComponentUpdate 메서드를 직접 사용자 정의하지 않는 한 render() 함수에 setstate()를 쓰지 마세요. 그렇지 않으면 무한 루프가 발생합니다
2. 상태에 값을 직접 할당할 수 없으므로 렌더링이 발생하지 않습니다. 예: this.state.num = 2
3. 배열 및 개체와 같은 참조 개체에 대해 작업할 때는 새 개체
배열을 반환하는 메서드를 사용하세요. push, pop, Shift, unshift, splice, 그러나 concat, Slice, filter, 확장 구문 사용
개체: Object.assgin/확장 구문

setState 업데이트 메커니즘

그림에 표시된 대로: 보류 중인 대기열 및 업데이트 대기열

위 내용은 React의 setState 메커니즘에 대한 간략한 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!