React 是一个非常流行的前端框架，它的组件化开发方式使得前端开发变得更加高效和简单。在 React 项目中，我们经常会使用一些通用的代码和组件，它们可以帮助我们更好地组织代码和提高开发效率。本文将介绍一些常用的 React 通用代码和组件，希望对大家的开发工作有所帮助。
通用代码
高阶组件（Higher-Order Component）
高阶组件是一个函数，它接受一个组件作为参数，并返回一个新的组件。这个新的组件可以增强原始组件的功能。高阶组件可以用来实现一些通用的逻辑，比如权限控制、数据获取和状态管理等。
下面是一个简单的高阶组件示例：
-- -------------------- ---- -------
-------- ---------------------- -
------ -------- ------------------ -
----- ----------- ------------- - ----------------
-------- -------------- -
-------------------
-
-------- ------------- -
--------------------
-
------ -
-----
---------- -- ----------------------
---------- ---------- --------------------------- ------------------------- --
------
--
--
-这个高阶组件可以给任何组件添加一个 loading 状态。使用方法如下：
-- -------------------- ---- -------
-------- ------------------ -
----- - ------------- ----------- - - ------
------------ -- -
---------------
------------------- -- -
--------------
---
-- ----
------ ------- ----------------
-
------ ------- -------------------------自定义 Hooks
自定义 Hooks 是一个函数，它可以使用 React 的 Hook，比如 useState、useEffect 等。自定义 Hooks 可以用来封装一些通用的逻辑，比如数据获取、表单处理和状态管理等。
下面是一个自定义 Hook 示例：
-- -------------------- ---- -------
-------- ------------- -
----- ------ -------- - ---------------
----- ----------- ------------- - ----------------
----- ------- --------- - ---------------
------------ -- -
----- -------- ----------- -
-------------------
--- -
----- -------- - ----- -----------
----- ---- - ----- ----------------
--------------
- ----- ------- -
----------------
- ------- -
--------------------
-
-
------------
-- -------
------ - ----- ---------- ----- --
-这个自定义 Hook 可以用来获取数据。使用方法如下：
-- -------------------- ---- -------
-------- ------------- -
----- - ----- ---------- ----- - - -----------------------------------------
-- ----------- -
------ ----------------------
-
-- ------- -
------ ----------- ----------------------
-
------ ------------------
-通用组件
Loading 组件
Loading 组件可以用来显示一个 loading 状态。它可以用在任何需要加载数据的地方。下面是一个 Loading 组件示例：
function Loading() {
return <div>Loading...</div>;
}Error 组件
Error 组件可以用来显示一个错误消息。它可以用在任何需要处理错误的地方。下面是一个 Error 组件示例：
function Error({ message }) {
return <div>Error: {message}</div>;
}Modal 组件
Modal 组件可以用来显示一个对话框。它可以用在任何需要显示弹出窗口的地方。下面是一个 Modal 组件示例：
-- -------------------- ---- -------
-------- ------- ------ --------- ------- -- -
------ -
---- ------------------
---- -------------------------
----------------
------- ----------------------------
------
---- ---------------------------------------
------
--
-这个 Modal 组件可以用来显示一个表单：
-- -------------------- ---- -------
-------- ------------- -
----- ----------- ------------- - ----------------
-------- ------------------ -
------------------
--------------------
-
------ -
-----
------- ----------- -- ------------------------ --------------
---------- -- -
------ --------- ------ ----------- -- ---------------------
------- ----------------------- --
--------
--
------
--
-总结
本文介绍了一些常用的 React 通用代码和组件，包括高阶组件、自定义 Hooks、Loading 组件、Error 组件和 Modal 组件。这些通用代码和组件可以帮助我们更好地组织代码和提高开发效率。希望本文对大家的开发工作有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66387cc0d3423812e4686bd8