在 React 中，总是调用 ReactDOM.hydrate 而不是 ReactDOM.render 可以吗?

问题描述

我在调用 ReactDOM.hydrate 的地方有如下代码.这是有时从节点服务器调用，有时在客户端浏览器中调用的共享代码.仅在客户端上调用它时，我是否需要做任何不同的事情(然后调用 hydrate).通常，我会调用 render.

I've got code like the following where I'm calling ReactDOM.hydrate. This is shared code that sometimes gets called from the node server and sometimes in the client browser. Do I need to do anything different (then calling hydrate) when calling it on the client only. Normally, I'd call render.

const render = Component => {
 ReactDOM.hydrate(
    <Router history={browserHistory}>
        <FullPage />
    </Router>,
    document.getElementById('root')
 )
}

渲染(应用程序)；

推荐答案

hydrate 在客户端做类似于 render 的工作，无论 HTML 是否有服务器渲染的标记，但是当以前没有像 SSR 那样的标记时，hydrate 会产生一些警告，但它会按预期呈现您的标记.解决此问题的更好方法是检查其 SSR(假设 root 作为您的父 div id):

hydrate do works similar to render on client side whether the HTML has server rendered markup or not, but when there is no markup previously like not SSR then hydrate produces some warnings but, it will render your markup as expected.A better way to solve this would be to check if its SSR (assuming root as your parent div id) :

var isMarkupPresent = document.getElementById('root').hasChildNodes();

然后你可以render 或 hydrate:

isMarkupPresent ? hydrate(...) ? render(...)

这篇关于在 React 中，总是调用 ReactDOM.hydrate 而不是 ReactDOM.render 可以吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！