防止 React 在 hydrate 上重新渲染部分 SSR 内容答案

【问题标题】：Prevent React from re-render partial SSR content on hydrate防止 React 在 hydrate 上重新渲染部分 SSR 内容
【发布时间】：2019-01-26 19:40:27
【问题描述】：

如何防止 SSR 内容在 React.hydrate(...) 上的客户端浏览器中重新呈现？

我的工作流程

在我当前的项目中，我在构建过程中通过ReactDomServer.renderToString(...) 渲染了一堆 React 组件。此渲染的结果将用作 Thymeleaf 片段。 SSR DOM 包含几个用于内部化的th:text 属性：

简单示例

这是我的组件：

import React from "react";

class WdbThym extends React.Component {
    constructor(props) {
        super(props);
    }

    shouldComponentUpdate() {
        return false;
    };

    render() {
        return (
            <span {...{ 'th:text': `#{${this.props.i18n}}` }}>
                {this.props.i18n}
            </span>
        );
    }
}

export default WdbThym;

这是WdbThym的示例用法：

<WdbThym i18n="general.hello_world" />

这是ReactDomServer.renderToString(...) 创建的：

<span th:text="#{general.hello_world}">general.hello_world</span>

这是 Thymeleaf 呈现并分发给客户端的内容：

<span>Hello World!</span>

这是React.hydrate 呈现的内容：

<span th:text="#{general.hello_world}">general.hello_world</span>

对于上述Component，如何防止React.hydrate(...) 上的初始渲染？

【问题讨论】：

你检查过github.com/facebook/react/issues/8017等相关问题吗？
我已经遇到过这个@estus。在我当前的项目中，给定的建议对我不起作用。然而，我创建了另一个小例子，给出的建议按描述工作。我当前的项目中一定还有其他问题:)
正如@estus 报告的那样，github.com/facebook/react/issues/8017 解决了这个问题。我创建了一个稍微复杂的示例来重现给定的建议：codesandbox.io/s/o5171l2v59

标签： reactjs thymeleaf server-side-rendering

【解决方案1】：

正如@estus 报告的那样，https://github.com/facebook/react/issues/8017 解决了这个问题。

我创建了一个稍微复杂的示例来重现给定的建议：

DOM

<div id="root">
  <div class="App">
    <h1>THIS IS SSR CONTENT</h1>
    <p>Current Time: 2019-01-27T08:00:00.000Z</p>
    <p>Hello World from Thymeleaf (SSR)</p>
  </div>
</div>

反应

class CsrComponent extends React.Component {
  state = { currentTime: "" };

  componentDidMount = () => {
    setInterval(() => {
      this.setState({ currentTime: new Date().toISOString() });
    }, 1000);
  };

  render() {
    return <p>Current Time: {this.state.currentTime}</p>;
  }
}

class SsrComponent extends React.Component {
  render() {
    return (
      <p
        dangerouslySetInnerHTML={{ __html: "" }}
        suppressHydrationWarning
        {...{ "th:text": `#{${this.props.i18n}}` }}
      />
    );
  }
}

class App extends React.Component {
  render() {
    return (
      <div className="App">
        <h1>THIS IS SSR CONTENT</h1>
        <CsrComponent />
        <SsrComponent i18n="general.hello_world" />
      </div>
    );
  }
}

保湿

const rootElement = document.getElementById("root");
ReactDOM.hydrate(<App />, rootElement);

这个给定的例子也可以在https://codesandbox.io/s/o5171l2v59获得

【讨论】：