ReactJS - renderToReadableStream() 方法

渲染组件是 React Web 开发领域中非常基本的任务。一种方法是使用 renderToReadableStream 函数将 React 组件渲染为流。

什么是 renderToReadableStream?

React 提供了 renderToReadableStream 方法用于 React 组件的服务器端渲染。我们可以使用此方法将我们的 React 树作为 HTML 渲染到可读 Web 流中。它允许我们以流格式传输在线内容，而不是一次创建和分发整个网页。

它是如何工作的?

当我们调用 renderToReadableStream 时，我们传入一个我们想要渲染为 Web 流的 React 组件。此组件应代表完整文档，包括 HTML 结构。该函数还接受可选参数，可用于自定义流的行为。

语法

const stream = await renderToReadableStream(reactNode,optional)

参数

reactNode − 它是一个要呈现为 HTML 的 React 节点。例如，像 <App /> 这样的 JSX 元素。App 组件应该呈现 <html> 标签，因为它是为了表示完整内容而创建的。
optional − 它是一个具有流选项的对象。

返回值

renderToReadableStream 方法返回一个 Promise。如果成功呈现 shell，则此 Promise 将解析为包含生成的 HTML 内容的可读 Web 流。如果呈现失败，则 Promise 被拒绝，让用户有机会提供后备 shell。

示例

示例 − 加载内容

我们可以在 React − 中以不同方式使用 renderToReadableStream 方法

流内容 − 为了让我们的网站更加用户友好，我们可以在加载时显示其中的各个部分。

import React, { useState, useEffect } from 'react';
import { renderToReadableStream } from 'react-dom/server';

const App = () => {
   const [content, setContent] = useState([]);
   useEffect(() => {
   
      // 逐步加载内容
      const loadDataProgressively = async () => {
         await new Promise(resolve => setTimeout(resolve, 1000));
         setContent(['Loading the content...']);
         await new Promise(resolve => setTimeout(resolve, 2000));
         setContent(['Loading the content...', 'More content...']);
         await new Promise(resolve => setTimeout(resolve, 2000));
         setContent(['All content is loaded!']);
      };
   
      loadDataProgressively();
   }, []);
   
   return (
      <div>
         {content.map((item, index) => (
            <p key={index}>{item}</p>
         ))}
      </div>
   );
};

const stream = renderToReadableStream(<App />);

输出

添加自定义脚本 − 我们可以引入自定义脚本来自定义网页显示的行为。

// 在我们的组件内部
useEffect(() => {
   
   // 创建新元素
   const script = document.createElement('script');
   script.text = 'console.log("Custom Script has been Executed");';
   document.body.appendChild(script);
}, []);

处理错误 − 在显示内容之前，我们可以处理服务器错误，甚至更改错误状态代码。

// 组件内部
const [error, setError] = useState(null);

useEffect(() => {
   try {
      // 可能引发错误的代码
   } catch (err) {
      setError(err);
   }
}, []);

return (
   <div>
      {error ? <p>Error is: {error.message}</p> : null}
   </div>
);

中止渲染 − 我们可以停止服务器渲染，让客户端在必要时处理其余的渲染。要中止渲染，我们只需根据条件停止渲染内容即可。这是一个简单的例子 −

const [abortRendering, setAbortRendering] = useState(false);

useEffect(() => {
      if (abortRendering) {
         // Stop rendering
      }
   }, []);

return (
   <div>
      {abortRendering ? <p>Rendering aborted</p> : <p>Content goes here</p>}
   </div>
);

带有帖子的示例 − 博客应用

此应用是一个简单的博客应用，可显示博客帖子列表。每篇帖子都有标题和内容。BlogApp 组件将帖子数组作为 prop，并使用 Post 组件呈现它们。因此，我们将有两个组件 Post 和 BlogApp。Post 组件将显示带有标题和内容的单个博客帖子。BlogApp 将是主要组件，它采用帖子数组并使用标题和内容呈现博客。该应用将生成带有帖子列表的博客。

import { renderToReadableStream } from 'react-render-stream';

// 定义 Post 和 BlogApp 组件
const Post = ({ title, content }) => (
   <div>
      <h2>{title}</h2>
      <p>{content}</p>
   </div>
);
const BlogApp = ({ posts }) => (
   <div>
      <h1>My Blog</h1>
      {posts.map((post, index) => (
         <Post key={index} {...post} />
      ))}
   </div>
);

// 创建一些示例博客文章
const posts = [
   { title: 'React Streams', content: 'Understanding renderToReadableStream.' },
   { title: 'State Management', content: 'Using Redux for state.' },
   // Add more posts as needed
];

// 渲染 BlogApp 组件
const App = () => (
   <div>
      <BlogApp posts={posts} />
   </div>
);

const stream = await renderToReadableStream(<App />);

输出

示例 − 电子商务产品目录

在此应用中，我们将有一个显示产品列表的电子商务产品目录。每种产品都有名称、价格和说明。ECommerceApp 组件将产品数组作为 prop，并使用 Product 组件呈现它们。我们将有两个组件:Product 和 ECommerceApp。Product 组件显示具有名称、价格和说明的单个产品。而 ECommerceApp 组件将是主要组件，它采用产品数组并呈现产品目录。该应用将生成一个带有产品列表的电子商务目录。

import { renderToReadableStream } from 'react-render-stream';

// 定义组件
const Product = ({ name, price, description }) => (
   <div>
      <h2>{name}</h2>
      <p>{description}</p>
      <p>${price}</p>
   </div>
);
const ECommerceApp = ({ products }) => (
   <div>
   <h1>Our Products</h1>
   {products.map((product, index) => (
      <Product key={index} {...product} />
   ))}
   </div>
);

// Sample products
const products = [
   { name: 'Laptop', price: 999, description: 'Powerful computing on the go.' },
   { name: 'Smartphone', price: 599, description: 'Stay connected anytime, anywhere.' },
];

// 渲染 ECommerceApp 组件
const App = () => (
   <div>
      <ECommerceApp products={products} />
   </div>
);

const stream = await renderToReadableStream(<App />);