本文旨在解决在使用 react router 的 `useParams` 钩子时，由于依赖项设置不当导致 `useEffect` 意外执行的问题。通过提取 `params` 对象中的特定属性作为依赖项，并添加必要的依赖项，可以避免不必要的副作用，提高组件的性能和可预测性。
在使用 React Router 的 useParams 钩子时，你可能会遇到一个常见问题：当窗口大小调整或页面重新渲染时，即使参数值没有改变，useEffect 仍然会执行。这通常是由于将整个 params 对象作为 useEffect 的依赖项引起的。
问题分析
useParams 返回的 params 对象在每次渲染时都可能是一个新的对象引用，即使其内部的值没有改变。当你在 useEffect 的依赖项数组中包含 params 时，React 会将每次渲染的 params 对象与上次渲染的 params 对象进行比较。由于对象引用不同，React 会认为依赖项发生了变化，从而触发 useEffect 的执行。
解决方案
解决此问题的关键在于只将 params 对象中实际使用的属性作为 useEffect 的依赖项，而不是整个 params 对象。此外，还需注意检查并添加其他必要的依赖项，以确保 useEffect 在正确的时机执行。
示例代码
假设你的组件中使用 useParams 获取 id 参数，并根据 id 和 video 的值来派发 redux actions。以下是修改后的代码：
import { useParams } from "react-router-dom"; import { useEffect } from "react"; import { useDispatch } from 'react-redux'; const MyComponent = () => { const { id } = useParams(); const dispatch = useDispatch(); const video = // 获取video的方式，比如从Redux store中获取 useEffect(() => { if ( (id && !video) || (!!id && !!video && id !== video?._id) ) { dispatch(addViewVideo({ _id: id })); dispatch(getVideo({ _id: id })); } }, [id, video, dispatch]); // 关键：只将 id 和 video 作为依赖项 return ( <div> {/* 组件内容 */} </div> ); }; export default MyComponent;
代码解释
- 提取 id 参数： 使用 const { id } = useParams(); 直接从 useParams 返回的对象中提取 id 属性。
- 指定精确依赖项： 在 useEffect 的依赖项数组中，只包含 id 和 video。这样，只有当 id 的值或 video 的引用发生变化时，useEffect 才会执行。
- 添加 dispatch 依赖项： 如果 useEffect 中使用了 dispatch 函数，也应该将其添加到依赖项数组中。这是因为 dispatch 函数的引用可能会因为组件的重新渲染而发生变化，导致 useEffect 的意外执行。但是通常 dispatch 由 useDispatch hook 获取，其引用是稳定的，可以忽略添加。
注意事项
- 仔细分析依赖项： 在使用 useEffect 时，务必仔细分析代码中使用的所有变量，并将它们添加到依赖项数组中。遗漏依赖项可能会导致意想不到的错误。
- 避免不必要的依赖项： 尽量避免将不必要的变量添加到依赖项数组中。过多的依赖项可能会导致 useEffect 频繁执行，降低组件的性能。
- 使用 ESLint 插件： 可以使用 ESLint 插件（例如 eslint-plugin-react-hooks）来帮助你检查 useEffect 的依赖项是否正确。
总结
通过只将 useParams 返回对象中实际使用的属性作为 useEffect 的依赖项，可以避免不必要的副作用，提高组件的性能和可预测性。同时，注意检查并添加其他必要的依赖项，以确保 useEffect 在正确的时机执行。记住，精确的依赖项管理是编写高效、可维护 React 组件的关键。