在 React 应用开发中，我们经常需要处理一些通用的问题，比如组件的权限控制、数据请求等。这些问题虽然非常重要，但重复代码却是一个不必要的浪费。React 高阶组件（Higher-Order Component，简称 HOC）可以提供一种解决通用问题的方法，可以让我们轻松创建可重用的组件逻辑。
本文将介绍一些简单易用的 React 高阶组件开发实践，帮助你更好地处理通用问题，并提高组件的可重用性和扩展性。本文假定你已经对 React 基础知识和组件 props 有一定的了解。
高阶组件是什么？
高阶组件是一个函数，它接受一个组件作为参数，并返回一个新的组件。这个新的组件可以拥有一些通用的逻辑，比如数据请求、权限控制、错误处理等，让我们的代码更加简洁。
下面是一个简单的高阶组件示例：
-- -------------------- ---- -------
-------- ------------------------------- -
------ --------------- -
----- -------- - -
---------
----- -------------------------
--
------ ----------------- ------------- ---
--
-这个高阶组件接受一个组件作为参数，并返回一个新的组件，在这个新的组件中，我们将传递给它的 text 属性转换成大写形式，然后将这个新的 text 属性再传递给原始的组件。
使用这个高阶组件很简单：
-- -------------------- ---- -------
-------- ------------------ -
------ ------------------------
-
----- ------------------------ - ---------------------------
-------- ----- -
------ -
-----
------------------------- ----------- ------- --
------
--
-这里我们使用 withUpperCase 高阶组件创建了一个新的 MyComponentWithUpperCase 组件，并将原始的 MyComponent 组件作为参数传递给了它。在 App 组件中，我们使用了这个新的 MyComponentWithUpperCase 组件，并传递了一个 text 属性。
当我们渲染这个 App 组件时，页面上会显示一个大写的 "HELLO WORLD!"。
通用问题的解决方案
下面我们将介绍一些常见的通用问题，并提供一些简单易用的高阶组件。
数据请求
在 React 应用中，我们通常需要从服务器获取数据。可以使用 fetch 或者其他的 HTTP 库进行数据请求，但是我们通常需要在组件挂载后立即发起这些请求，然后将请求结果传递给组件进行渲染。
下面是一个简单的数据请求高阶组件示例：
-- -------------------- ---- -------
-------- -------------------------- ---- -
------ --------------- -
----- ------ -------- - ---------------
------------ -- -
----------
-------------- -- ----------------
---------- -- ---------------
-- ----
------ ----------------- ---------- ----------- ---
--
-这个高阶组件接受一个组件作为参数，并返回一个新的组件，在这个新的组件中，它会使用 fetch 获取服务器的数据，并在数据请求完成后，将请求结果作为 data 属性传递给原始的组件。
使用这个高阶组件也很简单：
-- -------------------- ---- -------
-------- ------------------ -
------ ------------------------
-
----- ------------------- - --------------------- ----------------------------
-------- ----- -
------ -
-----
-------------------- --
------
--
-这里我们使用 withData 高阶组件创建了一个新的 MyComponentWithData 组件，并将原始的 MyComponent 组件作为参数传递给了它，同时指定了要请求的数据的 URL。在 MyComponent 组件中，我们可以访问 data 属性来获取请求结果。
权限控制
在 React 应用中，我们通常需要根据用户的权限来控制组件的可见性、可编辑性等。可以使用各种复杂的权限控制库来实现，但是我们也可以使用高阶组件来简化这个问题。
下面是一个简单的权限控制高阶组件示例：
function withPermission(WrappedComponent, permission) {
return function(props) {
if (!permission) {
return null;
}
return <WrappedComponent {...props} />;
};
}这个高阶组件接受一个组件和一个权限作为参数，并返回一个新的组件，在这个新的组件中，它会根据传递给它的权限控制是否渲染原始的组件。
使用这个高阶组件也很简单：
-- -------------------- ---- -------
-------- ------------------ -
------ ------- ----------------
-
----- ------------------------- - --------------------------- ------
-------- ----- -
------ -
-----
-------------------------- --
------
--
-这里我们使用 withPermission 高阶组件创建了一个新的 MyComponentWithPermission 组件，并将原始的 MyComponent 组件作为参数传递给了它，同时指定了要应用的权限。在这个例子中，我们指定了权限为 true，因此 MyComponent 组件也会被渲染出来。
错误处理
在 React 应用中，我们通常需要处理各种错误，比如网络错误、服务器错误等。可以使用 try-catch 或者类似的错误处理方法，但是我们通常也需要在全局范围内处理这些错误，比如显示错误消息、记录错误日志等。
下面是一个简单的错误处理高阶组件示例：
-- -------------------- ---- -------
-------- ----------------------------------- -------- -
------ --------------- -
--- -
------ ----------------- ---------- ---
- ----- ------- -
-- --------- -
---------------
-
------ -----
-
--
-这个高阶组件接受一个组件和一个错误处理函数作为参数，并返回一个新的组件，在这个新的组件中，它会捕获原始的组件抛出的错误，并调用传递给它的错误处理函数进行处理。
使用这个高阶组件也很简单：
-- -------------------- ---- -------
-------- ------------------ -
----- --- ---------------- ---- ---------
------ ------- ----------------
-
----- ---------------------------- - ------------------------------ ----- -- -
---------------------
---
-------- ----- -
------ -
-----
----------------------------- --
------
--
-这里我们使用 withErrorHandling 高阶组件创建了一个新的 MyComponentWithErrorHandling 组件，并将原始的 MyComponent 组件作为参数传递给了它，同时指定了要应用的错误处理函数。在 MyComponent 组件中，我们手动抛出了一个错误，然后这个错误就会被 withErrorHandling 高阶组件捕获，并调用错误处理函数进行处理。
结论
在本文中，我们介绍了 React 高阶组件的基本概念和用法，提供了一些通用问题的解决方案，并提供了一些简单易用的高阶组件。这些高阶组件可以让我们轻松处理数据请求、权限控制、错误处理等通用问题，让我们的代码更加简洁和可重用。
当然，这些只是演示了高阶组件的一些应用场景。React 在使用的时候，还有很多奇淫技巧。但是，每个HOC都会增加你的组件树中的嵌套层数，并在多个组件之间共享状态会变得越来越困难。出于这个原因，应该谨慎使用高阶组件。尽管如此，在某些情况下，它们仍然是技术栈中的强大工具——一种能够简化复杂代码、增加可重用性和可扩展性的东西。
$ npm install -g create-react-app $ create-react-app my-app $ cd my-app $ yarn start
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6729f82bddd3a70eb6ced448