介绍
在前端开发中，React 是非常常用的框架。然而，当我们需要在多平台上开发时，我们需要使用 Universal React 的方式。React Universal Container 是一个可以帮助我们实现 Universal React 的 npm 包，它支持在服务器端和客户端上同时运行 React 组件，以及通过传递属性和组件安全地调用异步数据。
安装和使用
在使用 React Universal Container 之前，我们需要先安装它。你可以从 npm 上下载和安装这个包：
--- ------- ------------------------- ------
在你的 React 项目中，你需要将 React Universal Container 作为一个根容器添加到你的应用程序中。这意味着你需要在服务器端和客户端的应用程序中都要添加这个根容器。接下来，我们将学习如何在服务器端和客户端的应用程序中使用这个 npm 包。
在服务器端使用 React Universal Container
在服务器端，我们需要使用 React 服务器端渲染模块来将 React 组件渲染成 HTML 格式的字符串，然后将这些字符串发送到客户端。让我们看一下如何在服务器端使用 React Universal Container。
------ ------- ---- ----------
------ ----- ---- --------
------ -------------- ---- -------------------
------ ------------------ ---- ----------------------------
------ --- ---- --------
----- --- - ----------
----- ---- - -----
----------------------------------
------------ ----- ---- -- -
----- ---- - ------------------------------
------------------- --------------- --
--
----------
--------- -----
------
------
--------- --------- ----- -----------
-------
------
---- -----------------------
------- -------------------------
-------
-------
---
---
---------------- -- -- -
------------------- ------- -- ---- ----------
---在上面的代码中，我们首先导入了 React、ReactDOMServer、UniversalContainer 和我们的 App 组件。然后，我们创建了一个 express 应用程序并设置了静态文件夹。在我们的路由中，我们使用 ReactDOMServer.renderToString() 函数将 UniversalContainer 组件渲染为 HTML 字符串。这个 HTML 字符串是我们将发送到浏览器的页面的一部分。最后，我们启动了我们的应用程序并打印出端口号。
在客户端使用 React Universal Container
在客户端，我们需要使用 React 客户端渲染模块来将 React 组件渲染到 DOM 元素中，然后将其他的客户端逻辑代码加载到应用程序中。让我们看一下如何在客户端使用 React Universal Container。
------ ----- ---- -------- ------ -------- ---- ------------ ------ ------------------ ---- ---------------------------- ------ --- ---- -------- ------------------------------------ --------------- --- ---------------------------------
在上面的代码中，我们导入了 React、ReactDOM 和 UniversalContainer，并使用 ReactDOM.hydrate() 函数将 UniversalContainer 组件渲染到具有 id="root" 的 DOM 元素上。
属性和组件
当你在两个不同的服务器上运行你的应用程序时，你的组件会分别在这两个服务器上运行。由于这两个服务器有不同的性能和网络延迟，所以你可能会遇到一些问题。为了解决这个问题，你可以使用 UniversalContainer 组件的 props 和 component 属性。
component 属性指定应该在哪个组件上运行逻辑。在我们的例子中，这是 App 组件。props 属性允许你传递信息到运行在服务器上的组件，这是一个非常有用的功能。
示例代码
我们的 App 组件非常简单，它只是一个展示了一个信息的渲染函数。
------ ----- ---- -------- ----- --- - -- ------- -- -- --------------------- ------ ------- ----
我们将配置文件放在服务器上运行，并在客户端使用 App 组件。
-- ------
------ ------- ---- ----------
------ ----- ---- --------
------ -------------- ---- -------------------
------ ------------------ ---- ----------------------------
------ --- ---- --------
----- --- - ----------
----- ---- - -----
----------------------------------
------------ ----- ---- -- -
----- ---- - ------------------------------
------------------- --------------- -------- -------- ------- ------- -- --
--
----------
--------- -----
------
------
--------- --------- ----- -----------
-------
------
---- -----------------------
------- -------------------------
-------
-------
---
---
---------------- -- -- -
------------------- ------- -- ---- ----------
----- ----- ------ ----- ---- -------- ------ -------- ---- ------------ ------ ------------------ ---- ---------------------------- ------ --- ---- -------- ------------------------------------ --------------- --- ---------------------------------
通过这个包，我们就能够在不同的平台上快速地开发 Universal React 应用程序了。
结论
在这篇文章中，我们学习了如何使用 npm 包 React Universal Container，了解了它能够为我们的 Universal React 应用程序带来的好处和功能。我们看到了如何在服务器端和客户端同时使用这个包，并了解了如何通过属性和组件来调用异步数据。通过这种方式，我们可以快速、有效地开发 Universal React 应用程序。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/600554ef81e8991b448d2262