ReactJS渲染应用程序两次为服务器端渲染应用程序?(重复代码)
Does ReactJS render the app twice for server side rendered app? ( DUPLICATE CODE)
在服务器端渲染中,结构是否要求我们渲染应用程序两次?在server.js文件中,应用程序结构被渲染并发送给客户端,如下所示。虽然完整的代码已经由Server.js生成,Client.js通过调用渲染函数再次生成。
所以应用程序的最终结构,据我所知是:SERVER.js(渲染HTML,获取初始状态并将其设置在PRELOADED_STATE变量中,使用renderFullPage函数渲染页面)= =>CLIENT.js(使用PRELOADED_STATE变量
呈现应用结构)如果我错了,请纠正我。如果不行,我们就不能做一次吗?
Server.js
import path from 'path'
import Express from 'express'
import React from 'react'
import { createStore } from 'redux'
import { Provider } from 'react-redux'
import counterApp from './reducers'
import App from './containers/App'
import { renderToString } from 'react-dom/server'
const app = Express()
const port = 3000
// This is fired every time the server side receives a request
app.use(handleRender)
// We are going to fill these out in the sections to follow
function handleRender(req, res) { /* ... */ }
function renderFullPage(html, preloadedState) { /* ... */ }
app.listen(port)
function handleRender(req, res) {
// Create a new Redux store instance
const store = createStore(counterApp)
// Render the component to a string
const html = renderToString(
<Provider store={store}>
<App />
</Provider>
)
// Grab the initial state from our Redux store
const preloadedState = store.getState()
// Send the rendered page back to the client
res.send(renderFullPage(html, preloadedState))
}
function renderFullPage(html, preloadedState) {
return `
<!doctype html>
<html>
<head>
<title>Redux Universal Example</title>
</head>
<body>
<div id="root">${html}</div>
<script>
window.__PRELOADED_STATE__ = ${JSON.stringify(preloadedState)}
</script>
<script src="/static/bundle.js"></script>
</body>
</html>
`
}
Client.js
import React from 'react'
import { render } from 'react-dom'
import { createStore } from 'redux'
import { Provider } from 'react-redux'
import App from './containers/App'
import counterApp from './reducers'
// Grab the state from a global injected into server-generated HTML
const preloadedState = window.__PRELOADED_STATE__
// Create Redux store with initial state
const store = createStore(counterApp, preloadedState)
render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById('root')
答案取决于你对渲染两次的定义。React将比较服务器中生成的节点的数据校验和与虚拟DOM中生成的节点的数据校验和,以验证它们与客户端中生成的节点是否相同。这样就不需要修改DOM,只需要修改虚拟DOM。
来自官方React文档:
如果你在一个已经有这个服务器渲染标记的节点上调用ReactDOM.render(), React将保留它并只附加事件处理程序,允许你有一个非常高性能的首次加载体验。
编辑:我错误地写了要比较的数据是reactId而不是checksum。
相关文章:
- 如何在Win8Metro应用程序的Javascript代码中捕获自己的C#事件
- 动态代码中存在系统应用程序地址错误
- 我如何知道js文件之间的javascript应用程序代码流
- 如何使用SAML和C#调试Windows Phone 8.1应用程序的Javascript代码
- 如何在启动时在PhoneGap应用程序中调用一些Objective C代码
- 如何使用一个代码库在线和离线访问 HTML5/JS 应用程序中的数据库
- 如何在 Rails 应用程序中使用任何 JavaScript 代码
- 在 MVC 应用程序中组织 JS 代码
- cordova.exec() 正在破坏我的应用程序代码
- 我可以在谷歌脚本编辑器(谷歌应用程序脚本)中调试JavaScript代码吗
- Webpack:拆分供应商和应用程序代码
- 如何从现有的web应用程序代码中制作桌面应用程序
- Cordova/Phonegap锁定源应用程序代码,使其不被编辑/黑客攻击
- 在应用程序代码上运行Google Closure编译器后,更新AngularJS模板HTML
- 当我更改应用程序代码时,我必须记住更改测试中的模拟函数
- 如何在web应用程序代码中找到一个GET HTTP请求正在发出
- 为什么我得到“不正确的注入令牌”!在这个angular应用程序代码中
- 谷歌chrome应用程序代码注入不工作的某些元素
- 维护PhoneGap混合/Web应用程序代码库
- 如何结合CKEditor在我的应用程序代码中使用RequireJS, grunt和uglify