component Did Mount는 정확히 언제 실행됩니까?

component Did Mount는 정확히 언제 실행됩니까?

이것은 리액트에서 반복적으로 발생하고 있는 문제입니다.그componentDidMount이 방법은 컴포넌트가 처음 렌더링될 때 실행되므로 높이 및 오프셋과 같은 DOM 측정을 수행할 수 있는 자연스러운 장소처럼 보입니다.그러나 컴포넌트 라이프 사이클의 이 시점에서 잘못된 스타일의 판독치를 수신하는 경우가 많습니다.디버거를 사용할 때 컴포넌트가 DOM에 있지만 화면에 아직 그려져 있지 않습니다.이 문제는 폭/높이가 대부분 100%로 설정된 요소에서 발생합니다.치수를 재는 경우componentDidUpdate- 모든 것이 정상적으로 동작하지만, 이 방법은 컴포넌트를 처음 렌더링할 때 실행되지 않습니다.

그래서 제 질문은, 정확히 언제가componentDidMount모든 브라우저 페인트가 끝난 후에 불이 붙지 않기 때문에 불이 붙었습니다.

편집: 이 Stackoverflow 문제는 다음과 같은 문제를 다룹니다.

또한 이 기트허브 대화를 언급하여

반응 성분 트리 안에서componentDidMount()는 모든 하위 구성 요소도 마운트된 후에 실행됩니다.즉, 어떤 컴포넌트도componentDidMount()는 부모 마운트 전에 기동됩니다.

따라서 DOM 위치 및 크기 등을 측정하려면componentDidMount()이 작업을 수행할 수 있는 안전하지 않은 장소/시간입니다.

사용자의 경우: 100% 폭/높이 구성 요소에서 정확한 판독값을 얻으려면 이러한 측정을 수행할 수 있는 안전한 장소가 내부입니다.componentDidMount()Top react component(상부 반응 컴포넌트)를 선택합니다.
100%는 부모/컨테이너에 상대적인 폭/높이입니다.따라서 측정도 부모가 마운트된 후에만 수행할 수 있습니다.

아시겠지만componentDidMount초기 렌더링 직후에 한 번만 트리거됩니다.

측정을 수행 중이므로 다음과 같은 경우 측정을 트리거할 수도 있습니다.componentDidUpdate컴포넌트가 업데이트될 때 측정값이 변경되는 경우.

주의하시기 바랍니다.componentDidUpdate초기 렌더링에서는 발생하지 않으므로 측정 처리를 트리거하려면 두 라이프사이클 이벤트가 모두 필요할 수 있습니다.이 두 번째 이벤트가 트리거되는지, 측정값이 다른지 확인하십시오.

내 생각에 당신은 사용하기를 피해야 한다.setTimeout또는requestAnimationFrame가능한 한.

리액트 라이프 사이클 레퍼런스

컴포넌트가 마운트되었을 때 한 번만 호출됩니다.API에서 데이터를 가져오기 위한 비동기 요청을 하기에 완벽한 시기입니다.가져온 데이터는 내부 컴포넌트 상태로 저장되며 render() 라이프 사이클 메서드로 표시됩니다.

심플: 렌더링 기능 후 실행

DOM 에 마운트 되고 있는 것에 응답하는 경우, 가장 신뢰할 수 있는 방법은 참조 콜백을 사용하는 것입니다.예를 들어 다음과 같습니다.

render() {
  return (
    <div
      ref={(el) => {
        if (el) {
          // el is the <div> in the DOM. Do your calculations here!
        }
      }}
    ></div>
  );  
}

볼 수 .componentDidMount()requestAnimationFrame()다음 도장 후에 로직이 발생합니다.

문제는 한 안 해봤어요.난난 、 제문에에부없 。 componentDidMount()페이지에 돔 노드가 추가된 직후에 발생하지만 반드시 도장된 후에는 발생하지 않습니다.

언급URL : https://stackoverflow.com/questions/36049493/when-exactly-is-componentdidmount-fired