Reactjs 如何在react中处理自定义挂钩的依赖项数组

import { useEffect } from 'react';

function useCustomHook(param1, extraDeps) {
  useEffect(() => {
    // do something with param1 here
  }, [param1, ...extraDeps])
}

const NewComponent = (props) => {
  [field1, setField1] = useState()
  [field2, setField2] = useState()

  // I only want this to be called when field1 change
  useCustomHook('.css-selector', [field1]);

  return <div>{field1}{field2}</div>;
}

// Pass the callback as a dep
cost useCustomHook = callback => {
  useEffect(() => { /* do something */ }, [callback])
};

// Then the user wraps the callback in `useMemo` to avoid running the effect too often
// Whenever the deps change, useMemo will ensure that the callback changes, which will cause effect to re-run
useCustomHook(
  useMemo(() => { /* do something }, [a, b, c])
);

Reactjs相关问答推荐

Reaction路由的问题-在Effect使用API调用响应设置状态之前呈现页面

为什么安装FLOBIT后，所有的输入FIELD现在都有一个蓝色的轮廓？

在Next.js中实现动态更改的服务器组件

TypeError：b不是React.js中的函数错误

下拉Tailwind CSS菜单与怪异beviour

使用`Link`包装`tr`标记会在Next.js中产生水合错误14

同一文件中前端和后端的Nginx配置

svg每条路径上的波浪动画

React useEffect 问题...异步函数内的变量正在获取延迟的更新值

如何在React组件中自动更新图表数据？

无法在 NextJS 中获取嵌套对象

如何在 React Hook Form 中使用嵌套对象处理错误验证消息

在React Router 6中，在路由渲染后更新路由数据

如何修改 react/jsx-no-useless-fragment 规则以允许 <>{children}

如何在屏幕上使用相同的可重用 组件处理加载/禁用状态和单击多个按钮的功能？

React Native应用如何订阅Supabase的实时数据？

React Native map 中的初始zoom 级别

如何将我的 ID 值传递给下一个组件？

具有自动完成功能的 Formik material ui 无法按预期工作

为什么此代码中的 useState 不更新(文本更新但 id 不更新)？