Headless CMS 与 React 结合的数据流通方案
在前端开发过程中，数据的流通是一个非常重要的环节。而随着现代化的开发方式的出现，Headless CMS 作为一种相对较新的技术也越来越受到了开发者们的青睐。而在开发中，如何将 Headless CMS 与 React 结合起来，构建一个高效稳定的数据流通方案，也成为了一个很有价值的探讨点。
Headless CMS 简介
Headless CMS 是一种不含前端呈现的内容管理系统，它只负责存储和管理数据。与传统的 CMS 不同，Headless CMS 可以完全解耦前后端，不受前端技术的限制，可以在任何场景中使用。例如，开发一个 iOS 或 Android 应用程序时，可以使用 Headless CMS 来管理应用所需要的所有数据。
当我们使用 Headless CMS 的时候，我们可以选择从后端 API 获取数据，然后将 API 返回的数据传递给前端 Web 应用。这个过程中，我们可以自由地选择使用最适合自己的技术栈。
Headless CMS 的优点
与传统的 CMS 相比，Headless CMS 有以下几个优点：
- 可扩展性好：Headless CMS 可以与任何技术栈进行集成，不受技术限制。
- 灵活性高：Headless CMS 不包含任何与前端相关的功能，所以可以灵活地根据需求进行自定义。
- 安全性高：Headless CMS 不需要提供额外的用户界面，所以可以保证数据的安全性。
- 提升开发效率：使用 Headless CMS 可以节省很多开发时间，因为不需要花时间去编写后台管理界面的功能。 现在很多公司和开发者都开始使用 Headless CMS 来管理他们的数据，而其与 React 结合的数据流通方案就更为重要。
Headless CMS 与 React 结合的数据流通方案
在 headless CMS 和 React 结合的方案中，我们考虑以下几个方面：
- 如何从 Headless CMS 中获取数据并将其传递到 React 应用程序中。
- 如何管理应用程序中的状态。
- 如何将用户交互行为反映到 Headless CMS 中，以便维护数据一致性。
下面我们来逐一讲解：
从 Headless CMS 中获取数据并将其传递到 React 应用程序中
React 官方提供了一套强大的钩子函数，其中 useEffect 和 useState 就是我们在处理 Headless CMS 数据流通时，非常强大的工具。
例如，我们可以使用 useEffect 来拉取 Headless CMS 中的数据：
------ - --------- --------- - ---- --------
-------- ----- -
----- ------ -------- - -------------
------------ -- -
------------------------------------
---------------- -- ----------------
------------ -- ---------------
-- ----
------ -------- -- ----------- ---- ----------
-这里我们使用了 useState 来存储从 Headless CMS 中获取的数据，使用 useEffect 来在组件加载时，拉取数据。
管理应用程序中的状态
React 中提供了状态管理库 redux，它可以帮助我们在不同组件间共享数据。
例如：
------ - ----------- - ---- --------
----- ------- - ------ - --- ------- -- -
------ ------------- -
---- -----------
------ ---------- ----------------
--------
------ ------
-
--
----- ----- - ---------------------这里我们定义了一个 reducer 来处理数据，通过 createStore 函数来创建一个 store 来共享数据。
将用户交互行为反映到 Headless CMS 中
当用户通过前端页面进行 CRUD 操作时，我们需要将这些操作反映到 Headless CMS 中，以保证数据一致性。
例如，使用 Headless CMS 中提供的 API 接口实现更新操作：
----- ---------- - ---- -------- -- -
------------------------------------------------------- -
------- ------
----- ------------------------
-------- -
--------------- ------------------
-
--
---------------- -- ----------------
------------ -- ------------------
-------------- -- --------------------
--这里我们通过 fetch 函数构造一个 PUT 请求，更新 Headless CMS 中的数据。
Headless CMS 与 React 结合的完整示例
下面这个示例展示了 Headless CMS 和 React 结合的完整解决方案。我们将用一个头像排版的应用作为例子。
1. 配置 Headless CMS API
首先，我们需要在 Headless CMS 中配置一个 API 接口，以便在 React 应用中请求数据。我们就以 Strapi 为例子。
开启 Strapi 的上传文件插件：
-- -- -------------------- ---------------------
添加一个 API 路由 http://127.0.0.1:1337/api/users :
-------------- - ----- -- -
----- ----- - -
-
--- --
----- -------
------ -----------------------------------------
---- --------- - -------
--
-
--- --
----- ---------
------ -------------------------------------------
---- --------- - ---------
--
-
--- --
----- --- --------
------ ------------------------------------------
---- --------- - ---------
--
-
--------------------- ----- ---- ----- -- -
---------------
--
-这个 API 返回了一个数组，其中包含了头像、名字、和简介等信息。之后我们将用这些数据填充到 React 应用中。
2. 创建 React 应用程序
接着我们使用 create-react-app 命令行工具创建一个新的 React 应用程序。
--- ---------------- ------ -- ------ --- -----
运行上述代码后，将新创建的应用程序加载到本地服务器上。在浏览器中打开 http://localhost:3000 可以看到一个空的 React 应用程序。
3. 填充 React 应用程序的数据
我们来先拉取从 HeadlessCMS 中获取到的头像和简介数据。
------ ------ - --------- --------- - ---- --------
------ ----- ---- --------
------ ------------
----- --- - -- -- -
----- ------- --------- - -------------
------------ -- -
----- -------- ----------- -
--- -
----- -------- - ----- ----------
---------------------------------
--
------------------------
- ----- ------- -
-------------------
-
-
------------
-- ----
------ -
---- ----------------
--------- - -------- --- ------------
----
------------- --- ----- ------ --- -- -- -
--- ---------
---- ----------- ---------- --
---------------
------------
-----
---
-----
------
--
--
------ ------- ---这里我们使用了 axios 库来请求数据，使用 useState 和 useEffect 两个 React 钩子函数来管理获取到的数据。下面的示例代码演示了拉取头像数据和呈现到 React 页面的所有步骤。
4. 实现头像上传功能
为了更进一步的实现一个完整的 Headless CMS 和 React 结合的应用，我们还要实现一个头像的上传功能。这里我们将先使用一个 form 表单来实现头像上传：
------ ------ - --------- --------- - ---- --------
------ ----- ---- --------
------ ------------
----- --- - -- -- -
----- ------- --------- - -------------
----- ------ -------- - ---------------
----- ------------ - ----- ------- -- -
-----------------------
----- -------- - --- -----------
----------------------- ------
--- -
----- -------- - ----- -----------
-----------------------------------
--------
--
---------------------------
- ----- ------- -
---------------------
-
--
----- ----------------- - ------- -- -
-------------------------------
--
------------ -- -
----- -------- ----------- -
--- -
----- -------- - ----- ----------
---------------------------------
--
------------------------
- ----- ------- -
-------------------
-
-
------------
-- ----
------ -
---- ----------------
----- ------------------------
------ ----------- ---------------------------- --
------- -----------------------------
-------
--------- - -------- --- ------------
----
------------- --- ----- ------ --- -- -- -
--- ---------
---- ----------- ---------- --
---------------
------------
-----
---
-----
------
--
--
------ ------- ----这里我们使用了 FormData 来上传文件，使用 useState 来管理获取到的文件，使用了 handleSubmit 和 handleUploadImage 函数来处理上传过程。
5. 使用 Redux 管理状态
最后，我们将使用 Redux 库来实现我们的状态管理。我们将数据放在初始化时，将其存储到 Redux Store 中。此后，我们只需在应用程序的每个组件中调用数据即可。
下面是我们所需要的代码：
index.js
------ ----- ---- --------
------ -------- ---- ------------
------ - -------- - ---- --------------
------ - ----------- - ---- --------
------ -------- ---- -------------
------ --------------
------ --- ---- --------
------ - -- ------------- ---- ------------------
----- ----- - ----------------------
----------------
--------- --------------
---- --
------------
-------------------------------
--
---------------------------reducers/index.js
----- ------------ - ---
----- ----- - ------ - ------------- ------- -- -
------ ------------- -
---- --------------
------ ---------- -------------
---- ------------
------ ---------- -----------------
--------
------ ------
-
--
------ ------- ------App.js
------ ------ - --------- - ---- --------
------ - ------------ ----------- - ---- --------------
------ ----- ---- --------
------ ------------
----- --- - -- -- -
----- ----- - ------------------- -- -------
----- -------- - --------------
------------ -- -
----- -------- ----------- -
--- -
----- -------- - ----- ----------
---------------------------------
--
----------
----- ------------
------ --------------
---
- ----- ------- -
-------------------
-
-
------------
-- ------------
----- ------------ - ----- ------- -- -
-----------------------
----- -------- - --- -----------
----------------------- ----------------------------
----------------------- -------------------------
---------------------- ------------------------
--- -
----- -------- - ----- -----------
----------------------------------------
--------
--
----------
----- --------------
----- --------------
---
- ----- ------- -
-------------------
-
--
------ -
---- ----------------
----- ------------------------
------ ----------- ----------- --
------ ----------- ----------- ------------------ --
--------- ---------- ----------------- --
------- -----------------------------
-------
--------- - -------- --- ------------
----
------------- --- ----- ---- ------ - --- - -- -- -
--- ---------
---- --------- ---------- --
---------------
------------
-----
---
-----
------
--
--
------ ------- ----这里我们使用了 useSelector 和 useDispatch 钩子函数，将获取到的数据存储到了 Redux Store 中。
结论
通过使用 Headless CMS 和 React 结合的方案，我们可以轻松地构建一个现代化、高效稳定的 Web 应用程序。我们学习了如何获取 Headless CMS 的数据、如何在 React 应用程序中管理状态、以及如何将 CRUD 操作反映到 Headless CMS 中。希望本文对你有所帮助。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6721f7ec2e7021665e09abb4