ReactJS에서 componentWillMount와 componentDidMount의 차이점은 무엇입니까?

나는 ( React.Component ) 에서 Facebook의 문서를 보았고 componentWillMount클라이언트 / 서버에서 어떻게 호출되는 반면 componentDidMount클라이언트에서만 호출 되는지 언급했습니다 . 무엇 않는 componentWillMount서버에합니까?

componentWillMount는 본질적으로 생성자입니다. 렌더링에 영향을주지 않는 인스턴스 속성을 설정하고, 저장소에서 동기식으로 데이터를 가져 와서 setState 및 구성 요소를 설정할 때 실행해야하는 기타 간단한 부작용없는 코드를 설정할 수 있습니다.

거의 필요하지 않으며 ES6 수업에서는 전혀 필요하지 않습니다.

constructor방법은 아니다 동일 componentWillMount.

Redux의 작성자에 따르면 생성자에서 작업을 디스패치하면 렌더링하는 동안 상태가 변경 될 수 있으므로 위험합니다.

그러나 파견 componentWillMount은 괜찮습니다.

에서 GitHub의 문제 :

이것은 한 구성 요소의 생성자 내부에서 dispatch ()가 다른 구성 요소 내부에서 setState ()를 유발할 때 발생합니다. React는 그러한 경고에 대한 "현재 소유자"를 추적합니다. 기술적으로 생성자가 애플리케이션의 다른 부분에서 setState ()를 유발할 때 생성자 내부에서 setState ()를 호출한다고 생각합니다. 저는 우리가 이것을 처리해야한다고 생각하지 않습니다. 단지 React가 최선을 다해 최선을 다하는 것입니다. 해결책은 올바르게 언급했듯이 componentWillMount () 내부에서 dispatch () 대신 사용하는 것입니다.

FakeRainBrigand가 말한 것에 추가하기 componentWillMount위해 서버와 클라이언트에서 React를 렌더링 할 때 호출되지만 클라이언트 componentDidMount에서만 호출됩니다.

componentWillMountrender컴포넌트 의 INITIAL 전에 수행 되며 props를 평가하고이를 기반으로 추가 로직을 수행하는 데 사용되며 (일반적으로 상태도 업데이트하기 위해) 서버에서 렌더링 된 첫 번째 마크 업을 얻기 위해 서버에서 수행 할 수 있습니다. .

componentDidMountrenderDOM이 업데이트 된 초기 이후에 수행 됩니다 (그러나 결정적으로이 DOM 업데이트가 브라우저에 그려지기 전에 DOM 자체와 모든 종류의 고급 상호 작용을 수행 할 수 있습니다). 물론 이것은 브라우저 자체에서만 발생할 수 있으므로 SSR의 일부로 발생하지 않습니다. 서버는 DOM 자체가 아닌 마크 업 만 생성 할 수 있으므로 SSR을 사용하는 경우 브라우저로 전송 된 후에 수행됩니다.

당신이 말하는 DOM과의 고급 상호 작용? Whaaaat ?? ... 네-이 시점에서 DOM이 업데이트 되었기 때문에 (그러나 사용자가 아직 브라우저에서 업데이트를 보지 못함) 사용하여 화면에 실제 페인팅을 가로 챈 window.requestAnimationFrame다음 실제 측정과 같은 작업을 수행 할 수 있습니다. 출력 될 DOM 요소. 추가 상태 변경을 수행 할 수 있습니다. 예를 들어 알 수없는 가변 길이 콘텐츠가있는 요소의 높이로 애니메이션하는 데 매우 유용합니다 (이제 콘텐츠를 측정하고 애니메이션에 높이를 할당 할 수 있음). 또는 일부 상태 변경 중에 콘텐츠 시나리오의 플래시를 방지합니다.

상태 변경으로 componentDid...인해 다시 렌더링이 발생하고 이에 따라 다시 렌더링되기 때문에 무한 루프가 발생할 수 있으므로 상태 변경을 보호하는 데 매우주의해야합니다 componentDid....

문서에 따라 ( https://facebook.github.io/react/docs/react-component.html )

will 접두사가 붙은 메서드 는 어떤 일이 발생 하기 직전에 호출 됩니다.

did 접두사가 붙은 메서드 는 어떤 일이 발생한 후 right 라고 합니다.

componentWillMount https://daveceddia.com/where-fetch-data-componentwillmount-vs-componentdidmount/

하지만 "문제"가 있습니다. 데이터를 가져 오기위한 비동기 호출은 렌더링이 발생하기 전에 반환되지 않습니다. 즉, 구성 요소가 빈 데이터로 한 번 이상 렌더링됩니다.

데이터가 도착하기를 기다리기 위해 렌더링을 "일시 중지"하는 방법은 없습니다. 어떻게 든 setTimeout에서 componentWillMount 또는 wrangle에서 promise를 반환 할 수 없습니다.

https://developmentarc.gitbooks.io/react-indepth/content/life_cycle/birth/premounting_with_componentwillmount.html

구성 요소는 기본 UI (DOM 등)에 액세스 할 수 없습니다. 또한 아직 생성되지 않았기 때문에 자식 참조에 액세스 할 수 없습니다. componentWillMount ()는 구성을 처리하고 상태를 업데이트하며 일반적으로 첫 번째 렌더링을 준비 할 수있는 기회입니다. 즉, prop 값을 기반으로 계산 또는 프로세스를 수행 할 수 있습니다.

componentWillMount ()의 사용 사례

예를 들어, 구성 요소 상태에서 구성 요소가 생성 된 날짜를 유지하려면이 메서드에서 설정할 수 있습니다. 이 메서드에서 상태를 설정하면 DOM이 다시 렌더링되지 않습니다. 대부분의 경우 구성 요소의 상태를 변경할 때마다 다시 렌더링이 트리거되기 때문에이 점을 명심해야합니다.

componentWillMount() {
  this.setState({ todayDate: new Date(Date.now())});
}

componentDidMount ()의 사용 사례

예를 들어, 현재 뉴스에서 데이터를 가져 와서 사용자에게 표시하는 뉴스 앱을 구축하고 있고 사용자가 페이지를 새로 고칠 필요없이이 데이터가 매시간 업데이트되도록 할 수 있습니다.

componentDidMount() {
  this.interval = setInterval(this.fetchNews, 3600000);
}

ComponentDidMount()메서드는 클래스 구성 요소의 현재 페이지 만 변경하지만 ComponentWillMount()영향을받는 모든 페이지를 변경합니다.setStates()