Reactjs 在自定义React钩子中使用debounce进行输入更改

我有一个自定义钩子

useForm

，它存储表单值并验证输入值

const { errors, handleChange, values } = useForm();

handleChange

对每个输入更改进行验证。可以在自定义挂钩内使用debouce吗？如果是，怎么做

const handleChange = (ev) => {
  ev.persist();

  // set value in values state
  const currentError = validate(/* pass params */)
  // update errors state
};

---

我认为可以通过将函数包装在去盎司中来解决这个问题

const doValidation = (ev) => {
  ev.persist();

  // set value in values state
  const currentError = validate(/* pass params */)
  // update errors state
};

const handleChange = debounce(doValidation,100)

---

这样，您的验证只应每100ms调用一次。

您可以使用库中的

debounce

，例如

lodash/下划线

，或者编写自己的debounce函数。发布您需要对handleChange函数进行去盎司处理并使用

useCallback

，这样您就不会在每个渲染上创建新的去盎司函数

const handleChange = useCallback(_.debounce((ev) => {
  ev.persist();

  // set value in values state
  const currentError = validate(/* pass params */)
  // update errors state
}, 500), []);

---

此外，当您使用useCallback并确保中的函数仅在初始时创建。最好不要依赖于封闭词法范围中的变量。

您还可以在blur而不是onChange上验证值。验证只会触发一次，您无需对其进行消噪。

这更适合作为评论。我同意，但我不能发表评论，因为->“您必须有50个声誉才能发表评论”：我理解，但添加低效的答案会让您投反对票，从而给您造成更大的伤害。请耐心等待，如果你能有效地为社区增值，你将拥有足够的声誉！祝你一切顺利！很好，useCallback钩子是避免重新创建debounce函数的正确解决方案。