클래스 기반 접근방식과 비교하여 Hooks로 상태를 설정한 후 재렌더링할 때 어떤 차이가 있는가?

클래스 기반 접근방식과 비교하여 Hooks로 상태를 설정한 후 재렌더링할 때 어떤 차이가 있는가?

클래스 구성 요소

React class 구성 요소에서는setState 상태가 실제로 새로운 값으로 변경되었는지 여부에 관계없이 항상 재조정을 유발한다.실제로 구성요소는 상태가 이전과 동일한 값으로 업데이트될 때 다시 렌더링된다.

문서(setState API Reference 설정):

setState()는 componentUpdate()가 false를 반환하지 않는 한 항상 rerender로 이어진다.

---

후크(기능 구성 요소)

그러나 후크를 사용하여 문서에서는 이전 상태와 동일한 값으로 상태를 업데이트하면 (하위 구성 요소의) 리렌더가 발생하지 않는다고 명시한다.

문서(상태 API 참조 사용):

상태 업데이트에서 제외

State Hook을 현재 상태와 동일한 값으로 업데이트하면 Resact는 어린이를 렌더링하거나 발사 효과를 제공하지 않고 방출된다. (Ract는 Object.is 비교 알고리즘을 사용한다.)

---

밀접하게 관련된 질문

1. 는 것이 정확한가?this.setState수업중 구성요소는 항상 새로운 구성요소를 야기한다. 심지어 새로운 구성요소가 있을때도state값이 이전 값과 같으십니까?
2. 후크가 있는 기능 구성 요소에서setState로부터useState단지 다음과 같은 경우에 재침입을 야기할 뿐이다.state값이 이전 값과 다른가?
3. 설정 중state와 함께this.setState안쪽에render설정과 동일한 클래스 구성 요소의 방법state후크가 있는 기능 구성요소의 기능 본체 내부
4. 다음 내용이 정확한가?
   • 클래스 구성 요소에서 설정되는 경우state에서render무한 루프 발생 방법.클래스 컴포넌트가 새로운 것을 신경 쓰지 않기 때문이다.state이전과 같다state계속 리렌딩되고 있어this.setState.
   • 그러나 후크가 있는 기능 구성 요소에서 설정state기능 본체 내부(재조정 시 실행되며, 이 기능은 다음과 유사함)renderclass 컴포넌트의 method in class components)는 문제가 되지 않을 것이다. 기능 컴포넌트는 단지 bails out of re-render를 볼 때state이전과 동일하다state.

이거 맞나?setState in class components는 새로운 상태 값이 이전과 동일하더라도 항상 리렌더를 발생시키는가?

setState 내에서 null을 반환하는 것 외에 유효한 값을 설정하는 경우 구성 요소가 PureComponent이거나 shouldComponentUpdate를 구현하지 않는 한 클래스 구성 요소에서 반응하여 항상 재렌더가 트리거됨

후크가 있는 기능 구성 요소에서 useState의 setState from useState는 상태 값이 이전 값과 다른 경우에만 리렌더를 발생시키는 것이 올바른가?

기구를 useState후크, 동일한 상태로 호출될 경우 세터가 재다이얼을 트리거하지 마십시오. 한 명 두 .

이걸로 상태를 설정하고 있어setState in the class component의 렌더링 method inside, 후크가 있는 기능 구성요소의 기능 본체 내부의 상태 설정과 동일?

기술적으로 예, 렌더 방식으로 직접 상태를 설정하면 상태 값이 다를 경우 클래스 구성 요소가 무한 루프를 유발할 경우 기능이 리렌더를 트리거하게 되며, 이는 기능 구성 요소의 경우다.이와 무관하게, 그것은 직접적으로 상태 업데이트를 호출하는 기능적인 구성요소로 인해 다른 상태 업데이트가 되돌아가기 때문에 여전히 문제를 일으킬 것이다.

클래스 구성 요소에서 렌더 방법에서 상태를 설정하면 무한 루프가 발생한다.새로운 상태가 이전 상태와 같다는 것은 클래스 구성요소가 신경 쓰지 않기 때문이다.이 모든 것에 대해 계속 재렌딩되고 있어.setState.

예, 따라서 렌더링 시 setState를 직접 호출하지 않는 것이 좋다.

그러나 후크가 있는 기능 구성요소에서 기능 본체 내부의 상태 설정(클래스 구성요소의 렌더 방법과 유사하게 재렌더로 실행됨)은 문제가 되지 않을 것이다. 기능 구성요소는 상태가 이전 상태와 동일하다고 볼 때 재렌더에서 제외되기 때문이다.

100% True는 아니다. 이전 값과 현재 값이 같지 않도록 이전 값을 사용하여 상태 업데이트를 트리거할 수 있기 때문이다.예를 들면

setCount(count => count + 1);

이런 경우, 구성요소는 여전히 무한 루프에 속하게 된다.

이는 OP에 대한 직접적인 답변이 아니라 Reaction 및/또는 Hooks에 처음 접하는 일부 사람들에게 관련되고 도움이 될 수 있으며 부작용과 렌더링 타이밍에 어려움을 겪고 있다.

아직 여기서 언급되지 않았으므로:앞에서 언급한 내용을 사용하지 않고 기능적 구성 요소에서 사용(수락된 답변의 주석 참조)ShouldComponentUpdate() components를 useEffect() 이 를 알 수 이 기능을 사용하면 특정 종속성이 변경된 경우와 같이 부작용과 어떤 조건에서 실행할지 구성 요소를 알 수 있다.

이 예에서는 다음 경우에만 대응 문서의props.source변경되면 기능이 실행된다.

useEffect(
  () => {
    const subscription = props.source.subscribe();
    return () => {
      subscription.unsubscribe();
    };
  },
  [props.source],
);

대응 문서: useEffect()

참조URL: https://stackoverflow.com/questions/55373878/what-are-the-differences-when-re-rendering-after-state-was-set-with-hooks-compar