在前端开发领域中，有许多工具或库可供我们使用，@sjc/isomorph 就是其中之一。它是一个能将服务端渲染的 React 应用程序的状态与客户端同步的 npm 包，允许您在同一分支上构建出可同时运行于服务端和客户端的 React 应用程序。本教程将帮助您了解 @sjc/isomorph 的基本概念和用法，并提供详细的示例代码，以便您更轻松地开始使用它。
什么是 @sjc/isomorph？
@sjc/isomorph 是一个支持构建同构应用程序（即可以同时运行于客户端和服务端的应用程序）的 npm 包。它提供了一种将从服务端发送到客户端的 HTML、CSS 和 JavaScript 组件进行同步的机制，允许您在浏览器和服务器之间共享数据和状态。与其他同构 React 应用程序中使用的方案一样，@sjc/isomorph 通过在不同的环境（如浏览器和 Node.js）中共享代码来平衡客户端和服务端之间的代码逻辑。
安装和使用
在使用 @sjc/isomorph 之前，您需要在项目中安装它。可以使用 npm 或 yarn 进行安装：
npm install @sjc/isomorph
yarn add @sjc/isomorph
安装完成后，您需要将您的代码修改为使用 @sjc/isomorph 提供的 API。以下是使用 @sjc/isomorph 的示例代码：
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- ------------
------ - ------------- ---------- - ---- ----------------
----- -------- - -- ---- -- -- -
-----
---------- ------------
---------- -- -- ------------
------
--
----- ------ - ---------------------- - ----- ------- ---
----- ------- - -------------------
----------------
--------
------------------------------
--这段示例代码演示了如何构建一个同构应用，其中一个服务端渲染的 React 基础页面（HomePage）在创建 HTML Anchor（createAnchor）时被传递给了 @sjc/isomorph。createAnchor 函数按名称和所需的其他属性将 React 组件解析为默认导出，是一个返回由组件创建的 HTML 标记的函数。createPage 函数使用 ReactDOM 将刚刚创建的 Anchor 组件呈现成一个 HTML 页面。
这段代码确保从服务器发送的 HTML 和 JavaScript 都包含我们在 server.props 中传递的状态。这使我们的代码可以在加载完 JavaScript 之前使用静态 HTML，其中一部分组件的状态已经呈现出来。
在客户端，页面再次通过 @sjc/isomorph 中的 createAnchor 和 createPage 元件创建。客户端的 createAnchor 函数不需要直接传递 page 的 props 属性，因为它们会自动从服务端定位处的 script 标记中的 window.__INITIAL_STATE 属性中提取。这种同步使得客户端和服务器端的页面渲染的内容一致。
总结
在本文中，我们学习了如何使用 @sjc/isomorph 构建一个支持同构应用程序的 React 应用程序。我们了解了该包的基本功能和使用方法，并提供了详细的示例代码。通过使用 @sjc/isomorph，您可以更轻松地创建可同时运行在客户端和服务端的应用程序，避免了由于代码差异引起的维护问题，同时提高了应用程序性能和响应时间。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005596e81e8991b448d6f3c