ReactJS为服务器端渲染应用渲染应用两次吗？ （DUPLICATE CODE）
在服务器端渲染，结构是否要求我们渲染应用程序两次？ 在server.js文件中，如下所示，应用程序结构被呈现并发送到客户端。 虽然完整的代码已经由Server.js生成，但是Client.js通过调用render函数再次完成。
所以应用程序的最终结构，正如我所理解的那样：SERVER.js（呈现HTML，获取初始状态并将其设置在PRELOADED_STATEvariables中，使用renderFullPage函数呈现页面）==> CLIENT.js（呈现应用程序结构使用PRELOADED_STATEvariables
如果我错了，请纠正我。 如果不是，我们不能只做一次吗？
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中生成的节点的数据校验和，以validation它们与客户端中生成的相同。 这样就不需要修改DOM，只需要修改虚拟DOM。
从官方React文档 ：
如果您在已经具有此服务器渲染标记的节点上调用ReactDOM.render（），则React将保留它并仅附加事件处理程序，从而使您拥有非常高效的第一次加载体验。
编辑：我错误地写道，比较的数据是reactId而不是校验和。