Question

我使用redux＆＃39; s official site中描述的方法创建了服务器端渲染，一切都很棒，但在客户端它再次渲染组件，我觉得这并不好。我将相同的状态从服务器传递到window.__STATE__变量并将其传递给我的客户端createStore方法作为初始状态，但它再次重新渲染。另外，请在评论中写下您需要哪部分代码，如果是的话。我没有提供，因为它与官方页面指令代码非常相似，并且没有错误，只是重新发布问题，但据我所知，它不是连接到虚拟DOM。

请帮我找到处理此任务的有效方法。

Answer 1

从ReactGo项目看一下这个例子：https://github.com/reactGo/reactGo/blob/master/app/client.jsx#L22

他们使用具有条件

的函数onUpdate

  if (window.__INITIAL_STATE__ !== null) {
    window.__INITIAL_STATE__ = null;
    return;
  }

如果已定义__INITIAL_STATE__，则会阻止重复提取。您的组件重新渲染可能与重复提取有关。

Answer 2

也许我不理解重新渲染你的意思，但它应该再次在客户端上“重新渲染”。同构作品的方式是它在服务器上呈现HTML，然后有效载荷包括初始状态以及HTML标记 - 这样浏览器“显示”具有更快的页面加载时间 - 因为UI甚至在之前呈现脚本被执行。现在，一旦解析了HTML并运行了脚本，React就会在内部构建虚拟DOM，然后将其与服务器生成的DOM进行比较并连接事件监听器等。但是，它不会完全重新渲染，因为没有新的DOM元素应该被创造。如果由于任何原因，您的React渲染的客户端运行导致虚拟DOM与生成的服务器DOM不同，React将给您一个警告。

“警告：React试图在容器中重用标记，但是校验和无效。这通常意味着您正在使用服务器渲染和服务器上生成的标记不是什么客户期待。反应注入新的标记以补偿哪个但是你失去了服务器渲染的许多好处。相反，弄清楚为什么生成的标记是不同的客户端或服务器：“

React Redux Server端再次在客户端上呈现重新呈现

2 个答案: