ReactJS - 高階组件：初学者的指南

你好，未来的React法师们！今天，我们将踏上一段令人兴奋的旅程，探索ReactJS中的高阶组件（HOCs）世界。如果你是编程新手，别担心——我会成为你的友好向导，我们会一步一步地进行。在本教程结束时，你将能够像专业人士一样创建HOCs！

ReactJS - Higher Order Components

高阶组件是什么？

在我们深入研究之前，先来了解一下高阶组件是什么。想象你在一个汉堡店。你点了一个普通汉堡，但后来决定加上奶酪、生菜和培根。给汉堡添加这些配料的过程与React中的HOCs所做的类似！

在React术语中，一个高阶组件是一个接收一个组件并返回一个带有一些添加功能的新的组件的函数。就像一种特殊的酱料，增强了你的现有组件，而不改变它们的核心成分。

这里有一个简单的类比：

// 这就像我们的普通汉堡
const PlainBurger = () => <div>?</div>;

// 这就是我们的HOC，就像添加配料
const addCheese = (Burger) => {
return () => (
<div>
<Burger />
<span>?</span>
</div>
);
};

// 这是一个加上了奶酪的增强汉堡！
const CheeseBurger = addCheese(PlainBurger);

在这个例子中，addCheese是我们的高阶组件。它接收我们的PlainBurger并返回一个带有奶酪的新组件！

如何使用高阶组件

现在我们理解了这个概念，让我们看看如何在更实际的场景中使用HOCs。假设我们有多个组件需要从API获取数据。我们可以在每个组件中编写相同的获取逻辑，也可以创建一个HOC来为我们处理这个逻辑。

下面是如何操作的：

import React, { useState, useEffect } from 'react';

// 这是我们的HOC
function withDataFetching(WrappedComponent, dataSource) {
return function(props) {
const [data, setData] = useState(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);

useEffect(() => {
fetch(dataSource)
.then(response => response.json())
.then(result => {
setData(result);
setLoading(false);
})
.catch(e => {
setError(e);
setLoading(false);
});
}, []);

if (loading) return <div>Loading...</div>;
if (error) return <div>Error: {error.message}</div>;

return <WrappedComponent data={data} {...props} />;
}
}

// 这是一个简单的组件，它将接收获取的数据
function UserList({ data }) {
return (
<ul>
{data.map(user => <li key={user.id}>{user.name}</li>)}
</ul>
);
}

// 我们使用我们的HOC来创建一个新的具有数据获取功能的组件
const UserListWithData = withDataFetching(UserList, 'https://api.example.com/users');

// 现在我们可以在我们的应用程序中使用UserListWithData！
function App() {
return (
<div>
<h1>User List</h1>
<UserListWithData />
</div>
);
}

让我们分解一下：

我们定义了我们的HOC withDataFetching。它接收两个参数：我们想要包装的组件（WrappedComponent）和数据源的URL（dataSource）。
在withDataFetching内部，我们创建并返回一个新的功能性组件。这个组件使用React hooks来管理状态和副作用。
我们使用useState来管理我们的data、loading和error状态。
我们使用useEffect在组件挂载时获取数据。一旦数据被获取，我们就相应地更新我们的状态。
根据状态，我们显示一个加载消息、一个错误消息，或者渲染带有获取数据的WrappedComponent。
我们创建了一个简单的UserList组件，它期望接收数据作为prop并渲染它。
我们使用我们的HOC来创建一个新的组件UserListWithData，它具有数据获取功能。
最后，我们在App组件中使用UserListWithData。

应用HOC组件

现在我们已经看到了如何创建和使用HOC，让我们来看看一些常见的用例和最佳实践。

身份验证HOC

HOC的一个常见用途是处理身份验证。这里有一个例子：

function withAuth(WrappedComponent) {
return function(props) {
const [isAuthenticated, setIsAuthenticated] = useState(false);

useEffect(() => {
// 检查用户是否已经认证
const token = localStorage.getItem('token');
setIsAuthenticated(!!token);
}, []);

if (!isAuthenticated) {
return <Redirect to="/login" />;
}

return <WrappedComponent {...props} />;
}
}

// 使用
const ProtectedComponent = withAuth(SensitiveDataComponent);

这个HOC在渲染包装的组件之前检查用户是否已经认证。如果没有，它将重定向到登录页面。

日志记录HOC

另一个有用的应用是向组件添加日志记录：

function withLogging(WrappedComponent) {
return function(props) {
useEffect(() => {
console.log(`Component ${WrappedComponent.name} mounted`);
return () => console.log(`Component ${WrappedComponent.name} unmounted`);
}, []);

return <WrappedComponent {...props} />;
}
}

// 使用
const LoggedComponent = withLogging(MyComponent);

这个HOC在组件挂载和卸载时记录日志，这对于调试非常有用。

最佳实践和注意事项

在使用HOC时，请记住以下提示：

不要修改原始组件：总是将原始组件与新的功能组合。
传递不相关的props：确保传递任何不是特定于HOC的props。
最大化可组合性：HOC应该能够与其他HOC组合。
为调试包装displayName：使用React.displayName给HOC一个在React DevTools中清晰的名字。

下面是一个总结常见HOC模式的表格：

模式	描述	示例用例
Props Proxy	操作props	添加/修改props
Inheritance Inversion	扩展组件生命周期	向生命周期方法添加日志
Render Highjacking	控制渲染输出	条件渲染
State Abstraction	管理和提供状态	获取并提供数据

请记住，高阶组件是React工具箱中的强大工具，但它们并不总是最佳解决方案。随着React中Hooks的引入，一些原本使用HOC的用例现在可以更优雅地使用自定义Hooks解决。在决定使用HOC、Hooks或其他模式时，总是考虑应用程序的具体需求。

那么，伙计们，你们已经迈出了进入React高阶组件世界的第一步。练习这些概念，尝试你自己的HOCs，很快你将像指挥家指挥乐队一样组合组件。快乐编码！

Credits: Image by storyset