简介
relay-modern-hoc是一个npm包，它提供了一组高阶组件（Higher-Order Components, HOC）用于在React组件中使用Relay Modern的功能。
Relay Modern是一个优化的GraphQL客户端，它可以帮助我们从服务器获取数据并将其传递给React组件。使用Relay Modern可以改善前端应用程序的性能和整体体验。
在本文中，我们将学习如何使用relay-modern-hoc，包括安装、使用、示例代码和最佳实践。
安装
使用npm进行安装：
npm install relay-modern-hoc --save
使用
我们将介绍三个高阶组件：
createFragmentContainer：用于创建一个组件，该组件可以接收来自Relay Modern查询的数据片段。该组件将根据数据片段渲染UI，其包含的fragment属性指定了要使用的查询片段。createRefetchContainer：用于创建一个组件，该组件可以接收来自Relay Modern查询的数据片段，同时还支持重新获取数据。该组件使用的refetchQuery定义了重新获取数据的查询。createPaginationContainer：用于创建一个带有分页功能的组件。该组件能够接收来自Relay Modern查询的数据片段，并作出分页请求。它使用的paginationQuery定义了分页查询，并且通过loadMore方法实现分页。
createFragmentContainer
使用createFragmentContainer，我们可以将组件与Relay Modern查询相结合，以便在渲染UI时访问GraphQL数据。我们必须为组件提供需要的查询片段，这个查询片段可以由GraphQL的查询或片段定义生成。
以下是createFragmentContainer的示例代码：
-- -------------------- ---- -------
------ ----- ---- --------
------ ------- ---- ---------------------------
------ - ----------------------- - ---- -------------------
----- ----------- - -- ---- -- -- -
-----
--------------------
-----------------
------
--
------ ------- ------------------------------------ -
----- --------
-------- ---------------- -- ---- -
----
---
-
--
---上面的代码中，我们使用了createFragmentContainer来包装MyComponent组件，并定制了需要的查询片段MyComponent_user。这个片段将被用来从GraphQL服务器获取用户的姓名和简介。
createRefetchContainer
使用createRefetchContainer，我们可以创建一个组件，该组件可以重新获取数据并更新UI。通过指定查询和变量，我们可以告诉Relay Modern如何重新获取数据。
以下是createRefetchContainer的示例代码：
-- -------------------- ---- -------
------ ----- ---- --------
------ ------- ---- ---------------------------
------ - ---------------------- - ---- -------------------
----- ----------- - -- ----- ------- -- -- -
-----
--------------------
-----------------
------- ----------- -- ---------------------------
------
--
------ ------- ----------------------------------- -
----- --------
-------- ---------------- -- ---- -
----
---
-
--
-- --------
----- -------------------------------- ---- -
-------- -------- -
-------------------
-
-
---上面的代码中，我们使用createRefetchContainer来包装MyComponent组件，并定义了所需的查询片段以及重新获取数据的查询。我们还将refetch方法作为属性传递给组件，以便用户单击“Refresh”按钮时可以使用这个方法重新获取数据。
createPaginationContainer
使用createPaginationContainer，我们可以创建一个带有分页功能的组件。这个组件能够通过加载更多的数据，实现无限滚动的功能。
以下是createPaginationContainer的示例代码：
-- -------------------- ---- -------
------ ----- ---- --------
------ ------- ---- ---------------------------
------ - ------------------------- - ---- -------------------
----- --------------- - -- ------ -------- -- -- -
-----
--------------- -- -
-----
--------------------
-----------------
------
---
------- ----------- -- ---------------- -------------
------
--
------ ------- ------------------------------------------ -
------ --------
-------- --------------------- -- ---- -------------- ----- -
----
---
-
--
-- -
---------- ----------
----------------------------- -
------ ------------ -- -------------------
--
--------------------------------------- ----------- -
------ -
---------------------
------ -----------
--
--
------------------- --------------- -
------ -
------ ---------------------
------- ----------------------
--
--
------ --------
----- -------------------------------------- ----- -------- -------- -
------ -
------------ ------- ------ -------- -
----- -
------
---- -
------------------------
-
-
-
-
-
--
---上面的代码中，我们使用createPaginationContainer来包装MyListComponent组件，并告诉Relay Modern如何获取数据以及如何分页。我们还提供了一个“Load More”按钮，每次单击按钮时就会调用loadMore方法。
最佳实践
在使用relay-modern-hoc时，请注意以下最佳实践：
将查询片段放在组件文件的同一位置，并使用
graphql标记将其定义为字符串。除非必要，否则应避免在单个组件中使用多个高阶组件。
对于所有查询和变量，请使用
graphql标记定义它们。对于复杂的查询和变量，请考虑使用另外的文件进行定义，并通过相对路径引用它们。
对高阶组件进行单元测试，并确保查询和变量的工作正常。
结论
在本文中，我们详细介绍了如何使用relay-modern-hoc，通过它我们可以在React组件中使用Relay Modern的强大功能。我们学习了如何使用三个高阶组件（createFragmentContainer，createRefetchContainer和createPaginationContainer），并展示了如何使用示例代码和最佳实践。现在，我们可以使用relay-modern-hoc来构建高性能和可扩展的Web应用程序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005672081e8991b448e38b1