在 React 函数组件中，useEffect Hook 允许我们在组件渲染后执行副作用操作，例如数据获取、订阅或手动更改 DOM。它的第二个参数是一个依赖项数组，用于控制副作用的执行时机。当依赖项数组为空 [] 时，useEffect 只会在组件挂载时执行一次；当数组中包含依赖项时，useEffect 会在这些依赖项发生变化时重新执行。
原始代码中，getBuses 函数负责从后端获取巴士数据，并被 useEffect 调用：
useEffect(() => {
getBuses();
//setSelectedBus(); // 这一行可能导致其他问题，建议移除或明确其作用
}, []) // 空依赖数组这里的问题在于，getBuses 函数本身依赖于组件状态 filters（通过闭包捕获）。当 filters 状态发生变化时，getBuses 函数内部捕获的 filters 仍然是旧值，因为 useEffect 只执行了一次。这导致即使 filters 改变，数据获取请求依然使用了旧的过滤条件，从而无法正确显示过滤后的结果。
React 社区工具通常会发出警告，提示 getBuses 是 useEffect 的一个缺失依赖项。解决此问题的直接方法是将 getBuses 添加到 useEffect 的依赖数组中：
useEffect(() => {
getBuses();
}, [getBuses]); // 将 getBuses 添加到依赖数组这样做确保了当 getBuses 函数引用发生变化时，useEffect 会重新执行。然而，由于 getBuses 内部依赖于 filters 状态，并且 filters 每次更新都会导致 getBuses 函数在新的渲染中重新创建，这可能会导致 useEffect 每次 filters 变化时都执行，这正是我们期望的。但为了性能和避免潜在的无限循环，我们可以进一步优化。
当一个函数（如 getBuses）被添加到 useEffect 的依赖数组中时，如果这个函数在每次渲染时都被重新创建，那么 useEffect 也会在每次渲染时都重新运行，即使函数内部的逻辑可能没有实质性变化。这会造成不必要的性能开销。
useCallback Hook 允许我们记忆化一个函数，只有当其依赖项发生变化时才重新创建该函数。这对于将函数作为 props 传递给子组件或作为 useEffect 依赖项时非常有用。
我们可以将 getBuses 函数包裹在 useCallback 中，并将其依赖项设置为 filters 和 dispatch：
import React, { useEffect, useState, useCallback } from 'react';
// ... 其他导入
function Home() {
// ... 其他状态和 Hook
const [filters, setFilters] = useState({});
const dispatch = useDispatch();
const [buses, setBuses] = useState([]);
// 使用 useCallback 记忆化 getBuses 函数
const getBuses = useCallback(async () => {
// 简化过滤器对象创建：直接使用 filters 即可
// const tempFilters = {};
// Object.keys(filters).forEach((key) => {
// if (filters[key]) {
// tempFilters[key] = filters[key];
// }
// });
dispatch(ShowLoading());
try {
const response = await axiosInstance.post(
"/api/buses/get-all-buses",
filters // 直接使用 filters 作为请求体
);
if (response.data.success) {
setBuses(response.data.data);
} else {
message.error(response.data.message);
}
} catch (error) {
message.error(error.message);
} finally {
dispatch(HideLoading());
}
}, [filters, dispatch]); // 依赖 filters 和 dispatch
useEffect(() => {
getBuses();
}, [getBuses]); // useEffect 依赖于记忆化的 getBuses
// ... 组件渲染逻辑
}注意事项：
tempFilters 的简化： 原始代码中创建 tempFilters 的逻辑是为了过滤掉 filters 中为空的值。如果后端能够处理包含空值的过滤参数，或者前端希望发送所有参数（包括空值）以允许后端灵活处理，那么直接发送 filters 对象是更简洁的做法。如果需要严格过滤空值，tempFilters 的逻辑是必要的，但也可以更简洁地实现，例如：
const validFilters = Object.fromEntries( Object.entries(filters).filter(([, value]) => value) ); // 然后在请求中使用 validFilters
axios Promise 链式调用： 为了代码的可读性和更清晰的错误处理流程，可以将 try-catch 块替换为 axios 的 Promise 链式调用：
const getBuses = useCallback(() => { // 注意这里不再是 async，因为我们用 .then/.catch 处理 Promise
dispatch(ShowLoading());
axiosInstance.post("/api/buses/get-all-buses", filters)
.then((response) => {
if (response?.data?.success) {
setBuses(response.data.data);
} else {
message.error(response.data.message);
}
})
.catch((error) => message.error(error.message))
.finally(() => dispatch(HideLoading()));
}, [filters, dispatch]);这种方式将加载状态的隐藏操作统一放在 finally 中，确保无论成功或失败都能正确处理。
在 React 中，为每个输入字段编写独立的 onChange 处理函数是常见的，但这会导致代码重复。通过利用输入元素的 name 属性，我们可以创建一个通用的 onChange 处理函数来动态更新状态。
首先，为每个输入字段添加 name 属性，其值应与 filters 状态中的键名对应：
<Col lg={6} sm={24}>
<input type='text'
placeholder='From'
value={filters.from}
name="from" <!-- 添加 name 属性 -->
onChange={handleOnChange} <!-- 使用通用处理函数 -->
/>
</Col>
<Col lg={6} sm={24}>
<input type='text'
placeholder='To'
value={filters.to}
name="to" <!-- 添加 name 属性 -->
onChange={handleOnChange}
/>
</Col>
<Col lg={6} sm={24}>
<input type='date'
placeholder='Date'
value={filters.journeyDate}
name="journeyDate" <!-- 添加 name 属性 -->
onChange={handleOnChange}
/>
</Col>然后，创建 handleOnChange 函数，并同样使用 useCallback 进行记忆化：
import React, { useEffect, useState, useCallback } from 'react';
// ... 其他导入
function Home() {
// ... 其他状态和 Hook
const handleOnChange = useCallback(({ target: { name, value } }) => {
setFilters((prevState) => ({ ...prevState, [name]: value }));
}, []); // 此函数不依赖外部变量，依赖数组为空
// ... getBuses 和 useEffect
}这个 handleOnChange 函数接收事件对象，解构出 target，再从 target 中获取 name 和 value。然后，它使用函数式更新 setFilters，确保在基于先前状态更新时获取到最新的 prevState，并动态地更新对应 name 的过滤值。
一个关键但常被忽视的问题是，即使前端正确地发送了过滤参数，如果后端 API 没有实现相应的过滤逻辑，那么前端的努力将是徒劳的。在提供的 busesRoute.js 文件中，get-all-buses 路由的实现如下：
router.post("/get-all-buses", authMiddleware, async (req, res) => {
try {
const buses = await Bus.find(); // 这里没有使用 req.body 中的过滤参数
return res.status(200).send({
success: true,
message: "Buses fetched successfully",
data: buses,
})
} catch (error) {
res.status(500).send({
success: false,
message: error.message
})
};
})可以看到，Bus.find() 方法在没有任何查询条件的情况下被调用，这意味着它将返回数据库中所有的巴士数据，而完全忽略了前端发送的 filters（即 req.body）。
要使过滤功能生效，后端必须根据 req.body 中的参数来构建查询条件。 例如：
router.post("/get-all-buses", authMiddleware, async (req, res) => {
try {
// 构建查询对象
const filters = req.body;
const query = {};
if (filters.from) {
query.from = filters.from;
}
if (filters.to) {
query.to = filters.to;
}
if (filters.journeyDate) {
query.journeyDate = filters.journeyDate;
}
// ... 可以添加更多过滤条件
const buses = await Bus.find(query); // 将查询条件传递给 find 方法
return res.status(200).send({
success: true,
message: "Buses fetched successfully",
data: buses,
});
} catch (error) {
res.status(500).send({
success: false,
message: error.message
});
}
});确保后端能够接收并正确处理前端传递的过滤参数是实现完整过滤功能的关键一步。
通过上述优化，我们解决了 React Hooks 在 MERN 栈应用中常见的数据加载和状态管理问题。核心要点包括：
遵循这些最佳实践，可以显著提升 MERN 应用的性能、可维护性和用户体验。
以上就是深入理解 React Hooks 与 MERN 应用中的数据管理和性能优化的详细内容，更多请关注php中文网其它相关文章！
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
581
收藏
