明智地排除这个useEffect依赖数组变量?Lint推荐3个，但我只想依赖1个

Question

我打算排除这个，但只是想再次检查是否有更好的方法来做到这一点。

• 这个逻辑检测到用户已经将应用程序移动到后台(通过appstatevvisible)，然后发送一堆数据(视图)到服务器。
• eslint建议包括视图，用户，cancelToken到依赖数组中，但这没有意义，因为我只想根据appstatevvisible发送这个。我不想每次用户或视图(例如更新)都触发这个。

因此我计划禁用这一行的详尽深度。

这样明智吗?

useEffect(() => {
async function handleViews() {
await sendViews(views, user, cancelToken);
... do more
}
if (
appStateVisible.match('inactive') ||
appStateVisible.match('background')
) {
handleViews();
}
}, [appStateVisible]);

Answer 1

No。你有两种解决方案可以忽略规则。

可以提供一个相对稳定的值。我有时喜欢使用useGetter类型的钩子:

const useGetter = <S>(value: S): (() => S) => {
const ref = useRef(value);
useLayoutEffect(() => {
ref.current = value;
});
return useCallback(() => ref.current, [ref]);
};

允许你这样写:

const getViewData = useGetter({ user, cancelToken })
useEffect(() => {
async function handleViews() {
const { user, cancelToken } = getViewData()
const user = await sendViews(views, user, cancelToken);
... do more
}
if (
appStateVisible.match('inactive') ||
appStateVisible.match('background')
) {
handleViews();
}
}, [appStateVisible, getViewData]);

因为getViewData没有改变，所以除了应用状态的改变之外，useEffect不会被触发。并且返回值不会过时。

作为另一种选择，你可以正常提供所有依赖项，但这次你自己检查appstatevvisible是否改变了。像usePrevious这样的钩子只是引用之前的值，对于检查previousAppStateVisible !== undefined && appStateVisible !== previousAppStateVisible的值是否从上次渲染中改变是有用的。如果没有，你可以早点回来。(https://usehooks.com/usePrevious/)