Javascript React bundle.js重置服务器端渲染创建的整个DOM
我正在尝试优化我的通用react应用程序。 看起来bundle.js是在服务器端渲染重置整个DOM后读取的 我的理解是React客户端javascript不会重置整个DOM，而是计算diff并在现有DOM上附加额外的DOM和事件 我的bundle.js是1.3MB，这肯定是渲染速度慢的原因，但我没有被期望重新渲染整个DOM 我的问题是 这是通用渲染的预期行为吗？如何不重置所有DOM server/index.jsJavascript React bundle.js重置服务器端渲染创建的整个DOM,javascript,reactjs,server-side-rendering,Javascript,Reactjs,Server Side Rendering,我正在尝试优化我的通用react应用程序。 看起来bundle.js是在服务器端渲染重置整个DOM后读取的 我的理解是React客户端javascript不会重置整个DOM，而是计算diff并在现有DOM上附加额外的DOM和事件 我的bundle.js是1.3MB，这肯定是渲染速度慢的原因，但我没有被期望重新渲染整个DOM 我的问题是 这是通用渲染的预期行为吗？如何不重置所有DOM server/index.js const store = configureStore() //******
const store = configureStore()
//****************
// App Setting
//****************
debug("Setting Application...")
const app = new Express()
app.use('/assets', Express.static('./assets'))
app.use('/build', Express.static('./build'))
app.get('*', (req, res) => {
const history = createHistory(req.originalUrl)
match({history, routes: createRoutes(store), location: req.originalUrl}, (error, redirectLocation, renderProps)=>{
const routes = createRoutes(store)
const components = (
<Provider store={store} key="provider">
<RouterContext {...renderProps} />
</Provider>
)
// React Dom Server Side Rendering
const app = ReactDOM.renderToStaticMarkup(<HTML components={components} store={store}/>)
// Response 200
res.status(200)
// Send response HTML
res.send(`<!doctype html>\n ${app}`)
})
})
app.listen(7777, () => debug('Server running on localhost:7777'))
let store
if (window.__REDUX_STORE__) {
store = configureStore(window.__REDUX_STORE__)
} else {
store = configureStore()
}
store.dispatch(fetchCurrentUserRequest())
render(
<Provider store={store}>
<AppRouter />
</Provider>,
document.querySelector('#content')
);
const store=configureStore（）
//****************
//应用程序设置
//****************
调试（“设置应用程序…”）
const app=new Express（）
app.use（'/assets'，Express.static（'./assets'））
app.use（'/build'，Express.static（'./build'））
应用程序获取（“*”，（请求，请求）=>{
const history=createHistory（要求原始记录）
匹配（{history，routes:createRoutes（store），location:req.originalUrl}，（error，redirectLocation，renderOps）=>{
const routes=createRoutes（存储）
常数分量=(
)
//React Dom服务器端渲染
const app=ReactDOM.renderToStaticMarkup（）
//答复200
资源状况（200）
//发送响应HTML
res.send（`\n${app}`）
})
})
app.listen（7777，（）=>debug（'Server running on localhost:7777'））
const store = configureStore()
//****************
// App Setting
//****************
debug("Setting Application...")
const app = new Express()
app.use('/assets', Express.static('./assets'))
app.use('/build', Express.static('./build'))
app.get('*', (req, res) => {
const history = createHistory(req.originalUrl)
match({history, routes: createRoutes(store), location: req.originalUrl}, (error, redirectLocation, renderProps)=>{
const routes = createRoutes(store)
const components = (
<Provider store={store} key="provider">
<RouterContext {...renderProps} />
</Provider>
)
// React Dom Server Side Rendering
const app = ReactDOM.renderToStaticMarkup(<HTML components={components} store={store}/>)
// Response 200
res.status(200)
// Send response HTML
res.send(`<!doctype html>\n ${app}`)
})
})
app.listen(7777, () => debug('Server running on localhost:7777'))
let store
if (window.__REDUX_STORE__) {
store = configureStore(window.__REDUX_STORE__)
} else {
store = configureStore()
}
store.dispatch(fetchCurrentUserRequest())
render(
<Provider store={store}>
<AppRouter />
</Provider>,
document.querySelector('#content')
);
let store
如果（窗口.\uuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuu{
存储=配置存储（窗口。\uuuu REDUX\u存储）
}否则{
store=configureStore（）
}
dispatch（fetchCurrentUserRequest（））
渲染(
,
document.querySelector（“#content”）
);
class HTML extends Component {
render(){
const { components, store } = this.props;
const content = components ? ReactDOM.renderToString(components): '';
return (
<html>
<head>
<link rel="stylesheet" href="build/style.css" />
</head>
<body>
<style>
* {
margin: 0;
padding: 0;
}
</style>
<div id="content" dangerouslySetInnerHTML={{__html: content}}/>
<script dangerouslySetInnerHTML={{__html: `window.__REDUX_STORE__=${serialize(store.getState())};`}} charSet="UTF-8"/>
<script src="build/bundle.js"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDnd7VpVekR7d09azP_RQ5Bb_bQHKMkSVo&libraries=places"></script>
</body>
</html>
)
}
}
export default HTML
类HTML扩展组件{
render（）{
const{components，store}=this.props；
const content=components？ReactDOM.renderToString（components）：“”；
返回(
* {
保证金：0；
填充：0；
}
)
}
}
导出默认HTML