React 16의 hydrate()와 render()의 차이점은 무엇입니까?

Question

문서를 읽었지만 실제로는 반응 16의 hydrate()와 render()의 차이점을 이해하지 못했습니다.

SSR과 클라이언트 측 렌더링 링을 결합하는 데 hydate()가 사용됩니다.

누군가가 수화 작용을 설명하고 ReactDOM의 차이점을 설명 할 수 있습니까? ReactDOMServer 문서에서

Answer 1

(강조 광산) : 이미이 서버 렌더링 마크 업이있는 노드에서 ReactDOM.hydrate()를 호출 할 경우, 그것을 유지 만 이벤트 핸들러를 첨부합니다 반작용

에 당신을 허용 매우 우수한 첫 번째로드 경험이 있어야합니다.

굵게 표시된 텍스트가 주요 차이점입니다. render은 초기 DOM과 현재 DOM이 다를 경우 노드를 변경할 수 있습니다. hydrate은 이벤트 처리기 만 연결합니다. Github issue that introduced hydrate as a separate API에서

:

이 최초 DOM <div id="container"><div class="spinner">Loading...</div></div> 입니다 만 (수화되지 않음) 렌더링 클라이언트 측을하려는 ReactDOM.render(<div class="myapp"><span>App</span></div>, document.getElementById('container'))를 호출합니다. 그러면 <div id="container"><div class="spinner"><span>App</span></div></div>으로 끝납니다. 속성을 패치하지 않기 때문입니다. 그들은 속성을 패치하지 않은

그냥 참고로 이유는이 비 SSR 트리로 렌더링 일반 수화 모드에서 수화 초기 속도를 느리게 정말 느린 것 ...

입니다 .