Javascript ReactJS是否为服务器端渲染的应用程序渲染应用程序两次？（重复代码）_Javascript_Node.js_Reactjs_Server Side Rendering

Javascript ReactJS是否为服务器端渲染的应用程序渲染应用程序两次？（重复代码）

javascript node.js reactjs

Javascript ReactJS是否为服务器端渲染的应用程序渲染应用程序两次？（重复代码）,javascript,node.js,reactjs,server-side-rendering,Javascript,Node.js,Reactjs,Server Side Rendering,在服务器端渲染中，结构是否要求我们渲染应用程序两次？在如下所示的server.js文件中，呈现应用程序结构并将其发送到客户端。虽然完整代码是由Server.js生成的，Client.js通过调用render函数再次生成的据我所知，应用程序的最终结构是： SERVER.js（呈现HTML，获取初始状态并将其设置在预加载的_state变量中，使用renderFullPage函数呈现页面） ==> CLIENT.js（使用预加载状态变量呈现应用程序结构如果我错了，请纠正我。如果不是，我们就不能做一

在服务器端渲染中，结构是否要求我们渲染应用程序两次？在如下所示的server.js文件中，呈现应用程序结构并将其发送到客户端。虽然完整代码是由Server.js生成的，Client.js通过调用render函数再次生成的

据我所知，应用程序的最终结构是： SERVER.js（呈现HTML，获取初始状态并将其设置在预加载的_state变量中，使用renderFullPage函数呈现页面） ==> CLIENT.js（使用预加载状态变量呈现应用程序结构

如果我错了，请纠正我。如果不是，我们就不能做一次吗

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>
    `
}

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')

从“路径”导入路径
从“Express”导入Express
从“React”导入React
从“redux”导入{createStore}
从“react redux”导入{Provider}
从“./reducers”导入计数器应用程序
从“./containers/App”导入应用程序
从'react dom/server'导入{renderToString}
const app=Express（）
常数端口=3000
//每次服务器端收到请求时，都会触发此操作
应用程序使用（handleRender）
//我们将在下面的章节中填写这些内容
函数handleRender（req，res）{/*…*/}
函数renderFullPage（html，preload状态）{/*…*/}
应用程序侦听（端口）
功能手柄器（要求，res）{
//创建一个新的Redux存储实例
const store=createStore（计数器应用程序）
//将组件渲染为字符串
常量html=renderToString(
)
//从我们的Redux商店获取初始状态
const preload state=store.getState（）
//将呈现的页面发送回客户端
res.send（renderFullPage（html，preload状态））
}
函数renderFullPage（html，preload状态）{
返回`
Redux通用示例
${html}
窗口。\uuuu预加载\u状态\uuuu=${JSON.stringify（预加载状态）}
`
}

Client.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>
    `
}

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”导入React
从'react dom'导入{render}
从“redux”导入{createStore}
从“react redux”导入{Provider}
从“./containers/App”导入应用程序
从“./reducers”导入计数器应用程序
//从注入服务器生成的HTML的全局文件中获取状态
常量预加载状态=窗口。\预加载状态__
//使用初始状态创建Redux存储
const store=createStore（计数器应用程序，预加载状态）
渲染(
,
document.getElementById（'root'））

答案取决于两次渲染的含义。React将比较服务器中生成的节点与虚拟DOM中生成的节点的数据校验和，以验证它们是否与客户端中生成的节点相同。这样就不需要修改DOM，只需修改虚拟DOM即可

从：

如果在已经具有此服务器呈现标记的节点上调用ReactDOM.render（），React将保留它，并仅附加事件处理程序，从而使您能够获得非常出色的首次加载体验

编辑：我错误地写下要比较的数据是reactId而不是checksum