react 服务端渲染图解
2018-12-17 本文已影响0人
漓漾li
react服务端渲染原理图解.png
注解
服务端字符串化react应用
const html = ReactDOMServer.renderToString(
<Provider store={store}>
<StaticRouter location={ctx.url} context={{}}>
<App />
</StaticRouter>
</Provider>
);
向html中注入store的方式
var htmlTemplate = `
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"> ${content}</div>
<script>window.__INITIAL_STATE__ =${JSON.stringify(initState)}</script>
<script type="text/javascript" src="/static/js/main.js"></script>
</body>
</html>
`
客户端创建store时，用
window.__INITIAL_STATE__初始化store即可
