使用 useParams 在 React 中高效过滤初始状态数据
本文旨在解决在 React SPA 项目中，如何利用 useParams 钩子从已加载的初始状态数据中筛选特定数据，避免重复发起 API 请求的问题。我们将探讨如何使用 useMemo 优化性能，并提供代码示例和注意事项，帮助开发者构建更高效的 React 应用。
在 React 单页应用（SPA）开发中，经常需要在详情页面展示特定 ID 的数据。一种常见的做法是通过 useParams 钩子获取 URL 中的 ID，然后再次发起 API 请求获取数据。但如果已经通过一次 API 请求获取了所有数据并保存在状态中，再次请求显得多余。本文将介绍如何利用 useParams 直接从初始状态数据中筛选所需数据，避免不必要的网络请求，提高应用性能。
避免不必要的 Effect Hook
直接从初始状态筛选数据，通常无需使用 useEffect 钩子。useEffect 主要用于处理副作用，例如数据获取、订阅事件等。在这里，我们只是根据已有的数据进行筛选，没有副作用，因此 useEffect 不是最佳选择。
使用 useMemo 优化性能
useMemo 钩子可以缓存计算结果，只有当依赖项发生变化时才重新计算。这对于优化性能非常有用，尤其是当 allFarms 数据量较大时。
以下是使用 useMemo 的示例代码：
import { useParams, Link } from "react-router-dom";
import { useMemo } from "react";
function FarmDetail({ allFarms, setAllFarms }) {
let { id } = useParams();
id = parseInt(id);
const farm = useMemo(() => allFarms?.find((f) => f.id === id), [id, allFarms]);
if (!farm) {
return <p className="alert warning">Not found</p>;
}
return (
<div>
<p>{farm.name}</p>
</div>
);
}
export default FarmDetail;代码解释：
- useParams(): 从 URL 中获取 id 参数。
-
useMemo(() => allFarms?.find((f) => f.id === id), [id, allFarms]):
- allFarms?.find((f) => f.id === id): 在 allFarms 数组中查找 id 与 URL 参数匹配的 farm 对象。使用可选链操作符 ?. 可以避免当 allFarms 为 null 或 undefined 时出现错误。
- [id, allFarms]：指定 id 和 allFarms 作为依赖项。只有当 id 或 allFarms 发生变化时，useMemo 才会重新计算 farm 的值。
- 条件渲染: 如果 farm 为 null 或 undefined (未找到)，则显示 "Not found" 提示信息。
简化代码：直接查找
如果 allFarms 的变化会导致 FarmDetail 组件重新渲染，则可以更简单地直接查找：
import { useParams, Link } from "react-router-dom";
function FarmDetail({ allFarms, setAllFarms }) {
let { id } = useParams();
id = parseInt(id);
const farm = allFarms?.find((f) => f.id === id);
if (!farm) {
return <p className="alert warning">Not found</p>;
}
return (
<div>
<p>{farm.name}</p>
</div>
);
}
export default FarmDetail;注意事项
- 数据类型转换： 确保 id 的数据类型正确。useParams 返回的 id 通常是字符串，需要使用 parseInt() 等方法转换为数字，以便与 allFarms 中的 id 进行比较。
- 条件渲染： 考虑到 allFarms 可能为空或 id 不存在的情况，使用条件渲染来避免错误。
- 性能优化： 当 allFarms 数据量较大时，考虑使用 useMemo 优化性能。
总结
通过 useParams 直接从初始状态数据中筛选数据，可以有效避免重复发起 API 请求，提高 React SPA 应用的性能。根据实际情况选择使用 useMemo 进行优化，并注意数据类型转换和条件渲染，可以构建更高效、更健壮的 React 应用。
