Question

我已经拨打了以下代码，我打电话给ReactDOM.hydrate。这是共享代码，有时会从节点服务器调用，有时也会在客户端浏览器中调用。在客户端上调用它时，是否需要执行任何不同的操作（然后调用hydrate）。通常，我会拨打render。

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

渲染（应用程序）;

Answer 1

hydrate在客户端的工作方式与render类似，无论HTML是否有服务器呈现标记，但是如果之前没有像SSR那样没有标记，那么hydrate会产生一些警告但是，它将按预期呈现您的标记。解决此问题的更好方法是检查其SSR（假设root为父div ID）：

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

然后您可以render或hydrate：

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

Answer 2

严格地说，总是使用ReactDOM.hydrate()并不安全。

From the docs on hydrate，您应该只在“其内容由ReactDOMServer呈现的容器”上使用它。 hydrate还期望服务器呈现的标记与客户端呈现输出的相同，并且任何差异都应被视为错误。

另一方面，

ReactDOM.render()用于将您的应用渲染到客户端上的空容器中。如果您没有在所有页面上使用服务器呈现标记，则可能需要执行此操作。

由于render()处理hydrate()没有使用的用例，因此说“您始终可以使用ReactDOM.hydrate()”是不安全的。

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

2 个答案: