getDerivedStateFromError와 componentDidCatch의 차이점은 무엇입니까?

getDerivedStateFromError와 componentDidCatch의 차이점은 무엇입니까?

여기서 알게 된 점:

componentDidCatch:

• 브라우저에서 항상 호출됩니다.
• DOM 이 이미 갱신되어 있는 경우는, 「커밋 단계」중에 호출됩니다.
• 오류 보고와 같은 용도로 사용해야 합니다.

getDerivedStateFromError:

• 또한 서버측에서 server-side-paraming 중에 호출됩니다.
• DOM이 아직 갱신되지 않은 경우 "렌더 단계"에서 호출됩니다.
• 폴백 UI 렌더링에 사용해야 합니다.

그래도 몇 가지 혼란스러운 점이 있습니다.

1. 둘 다 같은 유형의 오류를 감지하고 있습니까?아니면 라이프 사이클마다 다른 에러가 검출됩니까?
2. (같은 '오류 포착' 컴포넌트로) 항상 둘 다 사용해야 합니까?
3. "오류 복구에 componentDidCatch를 사용하는 것은 최적의 방법이 아닙니다.폴백 UI가 항상 동기적으로 렌더링되도록 하기 때문입니다." 뭐가 문제입니까?

문제의 진술은 대부분 옳다.현재 SSR에서는 오류 경계가 지원되지 않습니다.getDerivedStateFromError그리고.componentDidCatch서버 측에 영향을 주지 않습니다.

둘 다 같은 유형의 오류를 감지하고 있습니까?아니면 라이프 사이클마다 다른 에러가 검출됩니까?

같은 에러를 검출하고 있습니다만, 다른 국면에서 검출하고 있습니다.이것은, 지금까지의 방법으로 가능했습니다.componentDidCatch단독:

  static getDerivedStateFromError() {
    return { hasError: true };
  }

그리고.

  componentDidCatch() {
    this.setState({ hasError: true });
  }

같은 일을 하다componentDidCatch는 비동기 렌더링 지원이 추가될 때까지 서버 측에서 지원되지 않습니다.ReactDOMServer.

(같은 '오류 포착' 컴포넌트로) 항상 둘 다 사용해야 합니까?

둘 다 쓸 수 있어요.이 문서의 예는 다음과 같습니다.

class ErrorBoundary extends React.Component {
  state = { hasError: false };

  static getDerivedStateFromError(error) {
    return { hasError: true };
  }

  componentDidCatch(error, info) {
    logComponentStackToMyService(info.componentStack);
  }

  render() {
    if (this.state.hasError) {
      return <h1>Something went wrong.</h1>;
    }

    return this.props.children; 
  }
}

이 경우 책임은 두 사람 간에 나눠집니다. getDerivedStateFromError에러가 발생했을 경우의 상태를 갱신하는 것, 즉,componentDidCatch부작용과 접속이 가능합니다.this컴포넌트 인스턴스(필요한 경우)

"오류 복구에 componentDidCatch를 사용하는 것은 최적의 방법이 아닙니다.폴백 UI가 항상 동기적으로 렌더링되도록 하기 때문입니다." 뭐가 문제입니까?

New React 릴리스는 보다 효율적인 비동기 렌더링을 목표로 합니다.코멘트에서도 언급되었듯이 동기 렌더링은 엣지 케이스로 간주할 수 있기 때문에 폴백 UI에 큰 우려는 없습니다.

렌더링 중, 라이프 사이클 메서드 또는 하위 컴포넌트의 컨스트럭터에서 오류가 발생하면 이 두 메서드가 모두 호출됩니다.오류 경계를 구현하는 동안 사용할 수 있습니다.

React 문서에 따르면

getDerivedStateFromError하위 구성 요소에 의해 오류가 발생한 후 라이프사이클이 호출됩니다.파라미터로서 느려진 에러를 수신하고, 값을 갱신 상태로 되돌립니다.

---

둘 다 같은 유형의 오류를 감지하고 있습니까?아니면 라이프 사이클마다 다른 에러가 검출됩니까?

이들 라이프 사이클 방식 모두 동일한 오류를 검출하지만 이들 컴포넌트에 대한 인수는 다릅니다.

한편, 「 」는, 「 」, 「 」의 사이에getDerivedStateFromError하고 componentDidCatch라는두 합니다.info, i.e An object with a componentStack key containing information about which component threw the error.

getDerivedStateFromError()는 "위험" 단계에서 호출되므로 부작용은 허용되지 않습니다.예에서는, 「」를 사용해 .componentDidCatch()★★★★★★★★★★★★★★★★★★★★★★★★★.componentDidCatch할 수 releasessetState에서는.

componentDidCatchlogging .

---

한 also도.@Brian Vaughn는, 유저가 에 대해 하고 있습니다.

getDerivedStateFromError 는 서버 측 렌더링과 연동됩니다.componentDidCatch는 커밋 단계 라이프 사이클이지만 서버에는 커밋 단계가 없습니다.Get Derived State From Error는 렌더링 단계 라이프 사이클이므로 서버에서 오류 처리를 활성화하기 위해 사용할 수 있습니다.

렌더 단계 복구가 더 안전합니다.에러 리커버리의 개요componentDidCatch에러가 발생한 컴포넌트 아래의 모든 것에 대해 중간 커밋인 "commit"에 의존하기 때문에 약간 불안정합니다.이로 인해 componentDidMount 또는 componentDidUpdate를 구현하는 트리의 상위 컴포넌트 내부에 후속 오류가 발생할 수 있으며 해당 참조가 null이 아닌 것으로 가정할 수 있습니다(이러한 컴포넌트는 항상 오류가 아니기 때문입니다).

getDerivedStateFromError 는 동기 렌더링을 강제하지 않습니다.커밋 단계의 라이프 사이클에서 상태 업데이트는 항상 동기화되며 componentDidCatch는 커밋 단계에서 호출되기 때문에 오류 복구에 componentDidCatch를 사용하는 것은 최적의 방법이 아닙니다.이는 폴백 UI가 항상 동기화되도록 하기 때문입니다.(에러 회복은 엣지 케이스가 되기 때문에, 이것은 큰 염려가 되지 않습니다.

, 는 「」입니다.getDerivedStateFromError()위해) 으로 (UI를 위해) render() 메서드를 한 다음 method() render()로 합니다.componentDidCatch ('UI' DOM')

오류 경계에서 다른 라이프 사이클 메서드(componentWillUpdate, componentDidUpdate 등)가 정의되어 있는 경우 다른 렌더에서와 마찬가지로 호출됩니다.

---

"오류 복구에 componentDidCatch를 사용하는 것은 최적의 방법이 아닙니다.폴백 UI가 항상 동기적으로 렌더링되도록 하기 때문입니다." 뭐가 문제입니까?

되며, 더가 발생할 수 있습니다. 반면 componentDidCatch는 UI를 사용합니다.getDerivedStateFromError올바른 폴백 UI가 렌더링되고 렌더링된 구성요소에 더 이상 오류가 발생하지 않도록 렌더링 단계 이전 상태를 업데이트합니다., 에서는, 이 있는 로 하고 .

둘 다 분명히 국면을 .ErrorBoundarygetDerivedStateFromErrorReactJs Docs를 따르기 때문입니다.문서에는 다음과 같은 문장이 있습니다.

스태틱 " " 를 합니다.getDerivedStateFromError()UI를 사용하다componentDidCatch()에러 정보를 기록합니다.

에는 몇 때문에 저는 UI를 사용합니다.getDerivedStateFromError정보를 캐치하고 제가 사용하는 일을 하기 위해서componentDidCatch.

언급URL : https://stackoverflow.com/questions/52962851/whats-the-difference-between-getderivedstatefromerror-and-componentdidcatch