React Redux服务器端再渲染客户端

我创建了服务器端渲染的方法在redux的official site中描述的方法，一切都很好，但在客户端再次渲染组件，这不是我认为的好。我将服务器的相同状态传递给window.__STATE__变量，并将其作为初始状态传递给我的客户端createStore方法，但它再次重新渲染。如果需要，也请在注释中写下哪些代码部分是需要的。我不提供，因为它是非常相似的官方页面指令代码，并没有错误，只是问题重新渲染，但据我所知它没有连接到虚拟DOM。React Redux服务器端再渲染客户端

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

来源

2017-02-05 Aren Hovsepyan

看看从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__已经定义的重复获取。您的组件重新渲染可能与重复抓取有关。

来源

2017-02-07 21:07:08

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

“警告：反应企图在一个容器重复使用的标记，但校验是无效的这通常意味着你正在使用服务器渲染和服务器上生成的标记没有什么客户期待。反应注入了新的标记，以弥补其的作品，但你已经失去了很多的服务器渲染的好处相反，弄清楚为什么被生成的标记是客户端或服务器上的不同：”

来源

2017-02-07 21:16:57

嗨，与重 - 我的意思是说它没有检查VirtualDOM用于区分，但是再次渲染整个页面。也反应不给我警告，我会检查也许我的根组件连接到'redux'，这就是为什么它重新呈现整个页面。 –

React Redux服务器端再渲染客户端

回答

相关问题