ReactJS - renderToString() 方法

将 React 组件渲染为 HTML 是一种常见操作，尤其是在进行服务器端渲染 (SSR) 时。使用 renderToString 方法可以实现这一点。

什么是 renderToString?

React 的 renderToString 函数将 React 组件渲染为 HTML 字符串。在服务器上，它主要用于预渲染我们的 React 应用，然后将其作为初始服务器响应的一部分提供给客户端。这意味着我们的网站将加载得更快，并且更适合搜索引擎。

语法

renderToString(reactNode)

参数

reactNode − 它是一个要渲染为 HTML 的 React 节点。例如 <App />。

返回值

它返回一个 HTML 字符串。

示例

示例 − Greetings App

在此代码中，我们将创建一个名为 Greetings 的 React 组件来显示一条简单的问候消息。它将使用服务器端渲染将组件转换为 HTML 字符串并将该字符串记录到控制台。执行后，我们将看到 Greetings 组件的初始 HTML 表示，其中包含欢迎标题和鼓励使用 React 构建的消息。

// 导入必要的模块
const React = require('react');
const ReactDOMServer = require('react-dom/server');

// 定义一个带有问候的组件
const Greetings = () => (
   <div>
      <h1>Welcome to React!</h1>
      <p>Hope you enjoy building with it.</p>
   </div>
);
export default Greetings;

// 将组件渲染为字符串
const htmlString2 = ReactDOMServer.renderToString(<Greetings />);

// 记录结果
console.log(htmlString2);

输出

示例 − 计数器应用

在此应用中，我们将创建一个 React 组件 (Counter)，该组件表示一个带有增量按钮的简单计数器。它将使用服务器端渲染将组件转换为 HTML 字符串并将该字符串记录到控制台。执行后，我们将看到计数器组件的初始 HTML 表示，计数为 0。

// 导入必要的模块
const React = require('react');
const ReactDOMServer = require('react-dom/server');

// 定义一个带有简单计数器的组件
class Counter extends React.Component {
   constructor() {
      super();
      this.state = { count: 0 };
   }   
   render() {
      return (
         <div>
            <h1>Counter: {this.state.count}</h1>
            <button onClick={() => this.setState({ count: this.state.count + 1 })}>
               Increment
            </button>
         </div>
      );
   }
}
export default Counter;

// 将组件渲染为字符串
const htmlString3 = ReactDOMServer.renderToString(<Counter />);

// 记录结果
console.log(htmlString3);

输出

示例 − 服务器和客户端

我们可以通过两种不同的方式使用 renderToString:第一种是在服务器上，第二种是在客户端上。因此，我们将逐一讨论这两种方式。

在服务器上

因此，首先我们将从"react-dom/server"导入 renderToString 方法。并使用它将我们的 React 应用渲染为 HTML。

import { renderToString } from 'react-dom/server';
const html = renderToString(<App />);

在客户端

我们需要一个单独的函数，如 hydrateRoot，以使服务器生成的 HTML 具有交互性。

首先，验证我们的响应是否包含服务器渲染的 HTML，以及我们是否已包含加载 React 组件和客户端 hydrateRoot 所需的脚本。

服务器端渲染(Node.js/Express)

import express from 'express';
import React from 'react';
import { renderToString } from 'react-dom/server';
import App from './App';  // 导入主 React 组件

const app = express();
app.get('/', (req, res) => {
   
   // Server-side rendering
   const html = renderToString(<App />);
   res.send(`
      <!DOCTYPE html>
      <html>
      <head>
         <title>Server-Side Rendering</title>
      </head>
      <body>
         <div id="root">${html}</div>
         <script src="/client.js"></script>
      </body>
      </html>
   `);
});

app.listen(3000, () => {
   console.log('Server is running on http://localhost:3000');
});

Client-Side (client.js)

import React from 'react';
import { hydrateRoot } from 'react-dom'; // 导入 hydrateRoot
import App from './App'; // 导入主 React 组件

// 查找根元素
const rootElement = document.getElementById('root');

// Hydrate 服务器渲染的 HTML
hydrateRoot(rootElement, <App />);

按照这种方法，我们可以实现服务器端渲染，同时使内容在客户端具有交互性，结合两种方式的优点。

限制

• React Suspense 仅部分受 renderToString 支持。如果组件等待数据，renderToString 会立即将其回退作为 HTML 发送。

• 虽然它可以在浏览器中使用，但不建议用于客户端应用程序。客户端渲染有更好的选择。

总结

renderToString 是一种有用的 React 方法，用于在服务器端将我们的组件更改为 HTML，从而提高网站性能和搜索引擎优化。请记住，它可能不是客户端代码的最佳选择。

reactjs_reference_api.html