React 16의 hydrate()와 render()의 차이점은 무엇입니까?
류를읽,rencerencerence요요rencerence i i i 、 i 、 르 、 르 、 르 、 i 、 i 、 i 、 i 、 i 、 i 、 i i i 。hydrate() ★★★★★★★★★★★★★★★★★」render()열여섯 살
는 알고 있다hydrate()SSR 및 클라이언트 측 렌더링을 결합하는 데 사용됩니다.
수분을 공급하는 것이 무엇인지, React DOM의 차이점은 무엇인지 설명해 주실 수 있나요?
ReactDOMServer 문서(강조 마이닝):
「 」에
ReactDOM.hydrate()서버 렌더링 마크업이 이미 있는 노드에서는 React는 이를 보존하고 이벤트핸들러만 첨부하여 매우 퍼포먼스 높은 퍼스트로드 체험을 할 수 있습니다.
굵은 글씨로 된 텍스트가 주요 차이점입니다. render초기 DOM과 현재 DOM 사이에 차이가 있는 경우 노드가 변경될 수 있습니다. hydrate는 이벤트 핸들러만 연결합니다.
별도의 API로 도입된 Github 문제:
이것이 첫 번째 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 트리로 늦추는 것은 매우 느립니다.
상기의 사용법에 대해 특별히 덧붙일 것은 없습니다.hydrate하지만, 저는 그것에 대해 배우려고 노력하면서, 작은 예를 하나 들겠습니다. 그래서 이것이 도움이 된다고 생각하는 사람들을 위한 작업입니다.
목표
두 페이지를 제공합니다.츠키다ReactDOM.hydrate, 「」를 하고 있는 것.ReactDOM.render 컴포넌트는 에 따라 컴포넌트는 JSX에 의해 됩니다.<script> ( 인위적인 지연을 태그는 (서버에 ) 인위적인 을 나타냅니다.hydrate ★★★★★★★★★★★★★★★★★」render.
기본 구조
- HTML "skeleton"을 가진 파일 1개
- 커스텀 React 컴포넌트가 JSX로 작성된 파일 1개
- 서버에서 사용할 모든 페이지를 생성하는 스크립트 1개
- 서버를 실행하기 위한 스크립트 1개
결과.
후 " " "로 이동합니다.127.0.0.1헤더 하이드레이트, 버튼 및2개의 링크가 표시됩니다.버튼을 클릭할 수 있지만 아무 일도 일어나지 않습니다.잠시 후 문서 로드가 완료되고 버튼은 클릭 수를 카운트하기 시작합니다.그런 다음 "렌더" 링크를 클릭합니다.현재 표시된 페이지에는 헤더 렌더와 2개의 링크가 있지만 버튼은 없습니다.잠시 후 버튼이 표시되고 즉시 응답합니다.
설명.
"hydrate" 페이지에서 필요한 모든 html이 페이지와 함께 제공되기 때문에 모든 마크업이 즉시 렌더링됩니다.연결된 콜백이 없기 때문에 버튼이 응답하지 않습니다.(Once)components.js되어 「」가 표시됩니다.load를 window은 '콜백'으로 됩니다.hydrate.
'렌더' 페이지에서만 ReactDOM.render그래서 바로 보이지 않습니다.마지막으로 로드된 스크립트에 의해 페이지 모양이 어떻게 불안정하게 변경되는지 주의해 주십시오.
원천
사용하고 있는 커스텀 리액션 컴포넌트는 다음과 같습니다.은, , 컴포넌트를 렌더링하기 하기 위해서 은, 「」의의 목적입니다).exports ★★★★★★★★★★★★★★★★★」React오브젝트)를 표시합니다.
// components.jsx
var exports = typeof(exports) == 'object' ? exports : {};
var React = typeof(React) == 'object' ? React : require('react');
function MyButton(props) {
[click, setClick] = React.useState(0);
function handleClick() { setClick(click + 1); }
return (
<button onClick={handleClick}>Clicked: {click}</button>
);
}
exports.MyButton = MyButton;
서버에 필요한 모든 페이지를 생성하기 위해 사용되는 스크립트입니다.babel components.jsx jav javascript 、 React 、 ReactDOMServer 와및ascript 。 페이지입니다.getPage로부터 내보냅니다.pageTemplate.js , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , .
// genScript.js
let babel = require('@babel/core');
let fs = require('fs');
let ReactDOMServer = require('react-dom/server');
let React = require('react');
let pageTemplate = require('./pageTemplate.js');
script = babel.transformFileSync(
'components.jsx',
{presets : [['@babel/react']]}
);
fs.writeFileSync('components.js',script.code);
let components = require('./components.js');
hydrateHTML = pageTemplate.getPage(
'MyButton',
ReactDOMServer.renderToString(React.createElement(components.MyButton)),
'hydrate'
);
renderHTML = pageTemplate.getPage(
'MyButton',
'',
'render'
);
fs.writeFileSync('hydrate.html',hydrateHTML);
fs.writeFileSync('render.html',renderHTML);
은 그냥 .getPage를 참조해 주세요.
// pageTemplate.js
exports.getPage = function(
reactElementTag,
reactElementString,
reactDOMMethod
) {
return `
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js" defer></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" defer></script>
<script src="./components.js" defer></script>
</head>
<body>
<h1>${ reactDOMMethod }</h1>
<div id="react-root">${ reactElementString }</div>
<a href="hydrate.html">hydrate</a>
<a href="render.html">render</a>
</body>
<script>
window.addEventListener('load', (e) => {
ReactDOM.${ reactDOMMethod }(
React.createElement(${ reactElementTag }),
document.getElementById('react-root')
);
});
</script>
</html>
`;
}
마지막으로 실제 서버
// server.js
let http = require('http');
let fs = require('fs');
let renderPage = fs.readFileSync('render.html');
let hydratePage = fs.readFileSync('hydrate.html');
let componentsSource = fs.readFileSync('components.js');
http.createServer((req, res) => {
if (req.url == '/components.js') {
// artificial delay
setTimeout(() => {
res.setHeader('Content-Type','text/javascript');
res.end(componentsSource);
}, 2000);
} else if (req.url == '/render.html') {
res.end(renderPage);
} else {
res.end(hydratePage);
}
}).listen(80,'127.0.0.1');
Hydrate는 기본적으로 SSR(Server Side Rendering)의 경우에 사용됩니다.SSR는 페이지를 처음 로드할 때 공백이 되지 않도록 서버에서 발송되는 골격 또는 HTML 마크업을 제공하며, 검색 엔진 봇은 페이지를 SEO(SSR 사용 사례)에 대해 색인화할 수 있습니다.따라서 hydrate는 SSR이 적용되는 페이지 또는 노드에 JS를 추가합니다.사용자가 수행한 이벤트에 페이지가 응답합니다.
렌더는 클라이언트 측 브라우저의 컴포넌트를 렌더링하는 데 사용됩니다.Hydrate를 렌더로 바꾸려고 하면 렌더가 권장되지 않으며 SSR의 경우 사용할 수 없다는 경고가 표시됩니다.Hydrate에 비해 속도가 느리기 때문에 삭제되었습니다.
위에 덧붙여...
ReactDOM.hydrate()와 같다render()단, HTML 콘텐츠가 ReactDOMServer에 의해 렌더링된 컨테이너에 수화(이벤트 리스너 첨부)를 하는 데 사용됩니다.React는 이벤트청취자를 기존 마크업에 연결하려고 합니다.
ReactDOM.render()를 사용하여 서버 렌더링 컨테이너를 수화시키는 것은 속도가 느리기 때문에 권장되지 않으며 React 17에서는 삭제되므로 다음을 사용합니다.hydrate()★★★★★★ 。
서버측 React에서 이미 렌더링된 HTML에 기능을 되돌리는 모든 과정을 하이드레이션이라고 합니다.
따라서 한번 렌더링된 HTML을 통해 다시 렌더링하는 과정을 수화라고 합니다.
만약 에 전화를 해서 을 공급하려고 ,ReactDOM.render() its itsReactDOM.hydrate().
render는 지정된 요소(대부분의 경우 'root'로 이름 붙여짐)에 있는 모든 것을 지우고 재구축합니다.hydrate는 지정된 요소 안에 이미 있는 모든 것을 유지하고 해당 요소로부터 구축하여 초기 페이지의 로드를 고속화합니다.
언급URL : https://stackoverflow.com/questions/46516395/whats-the-difference-between-hydrate-and-render-in-react-16
'programing' 카테고리의 다른 글
| Django REST Framework에서 커스텀 JSON을 반환하는 방법 (0) | 2023.03.01 |
|---|---|
| powershell 3에서 json을 예쁘게 하다 (0) | 2023.03.01 |
| 웹 소켓 프레임 크기 제한 (0) | 2023.03.01 |
| 문자열이 C#의 XML 또는 JSON인지 빠르게 확인하는 방법 (0) | 2023.03.01 |
| 워드프레스 ssl에서 404 오류 발생 (0) | 2023.03.01 |