简介
@shopify/react-universal-provider 是一个 npm 包，它提供了一种让某些 React 组件在服务端渲染和客户端渲染时共享数据的方式。它的用法非常简单，但是需要理解一些 React 生态系统中服务端渲染和客户端渲染的相关概念和技术。本文将详细讲解这个 npm 包的使用方法，同时介绍一些基础概念和相关技术。
安装
npm 包 @shopify/react-universal-provider 可以通过 npm 或 yarn 安装，建议使用 yarn：
yarn add @shopify/react-universal-provider
用法
@shopify/react-universal-provider 提供了一个 UniversalProvider 组件，你可以将你需要在服务端和客户端上共享的数据作为其 data 属性传入，然后将你需要在服务端渲染的 React 组件作为其子组件传入。例如：
-- -------------------- ---- -------
------ ----- ---- --------
------ ------------------- ---- ------------------------------------
-------- ---------------------- -
------ -----------------
-
------ ------- -------- -------------- -
------ -
------------------ -----------------
------------ --
--------------------
--
-在客户端代码中，你可以按如下方式解决初始数据获取的问题：
-- -------------------- ---- -------
------ ----- ---- --------
------ ------------------- ---- ------------------------------------
------ ----------- ---- ----------------
-------- ----- -
------ -
-------------------
------------ -- ------------ ----------------- ---
--------------------
--
-这里，UniversalConsumer 组件接受一个函数作为其子组件，这个函数可以获取由 UniversalProvider 组件提供的数据。MyComponent 组件从 UniversalConsumer 组件中接收传递进来的 message 属性。
服务端渲染
在服务端渲染版本的代码中，你可以首先通过一些数据获取逻辑来获取初始的 data 属性，然后将其传递给 UniversalProvider 组件。例如：
-- -------------------- ---- -------
------ ----- ---- --------
------ -------------- ---- -------------------
------ ------------------- ---- ------------------------------------
------ --- ---- --------
----- -------- ----------------- -
----- ---- - ----------
----- --- - -
------------------ ------------
---- --
--------------------
--
----- ---- - -----------------------------------
------ ---------- -----
------
------
--------------------
-------
------
---- ----------------------
--------------------------- - ---------------------------------
------- --------------------------
-------
---------
-
------ ------- -------这里，我们在渲染结果输出到页面之前，将初始数据保存在了传递给客户端代码的 HTML 页面中，并将其命名为 window.INITIAL_DATA。在客户端代码中，我们可以从这个全局变量中读取来自服务端的数据。例如：
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- ------------
------ ------------------- ---- ------------------------------------
------ --- ---- --------
----- ---- - --------------------
----- --- - -
------------------ ------------
---- --
--------------------
--
--------------------- --------------------------------这里，我们使用 ReactDOM.hydrate 而不是 ReactDOM.render 来向浏览器中已经渲染的 HTML 代码中添加事件监听器等客户端交互逻辑。
总结
以上，我们详细讲解了 npm 包 @shopify/react-universal-provider 的使用方法，并介绍了一些 React 生态系统中服务端渲染和客户端渲染的相关概念和技术。希望本文对你理解 React 服务端渲染有所帮助。
示例代码
完整的示例代码可以在以下代码仓库中找到：
https://github.com/example/react-universal-provider-example
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f3d0faddbf7be33b25670fa