这个“自定义反应钩子”是否违反了钩子法？

问题描述

我在 useEffects 中以相同的格式语法使用了许多 useCallbacks，我想缩短它们。所以，我将它们映射到这个钩子中。 effects 是一组 useCallback 函数。

import React from 'react';
    const useEffects = (effects: Function[]) =>
      effects.map((effect) =>
        React.useEffect(() => {
          effect();
        },[effect])
      );
export default useEffects;

解决方法

不能在数组中定义钩子。

最近写了一篇关于hook的渲染顺序的文章。 https://windmaomao.medium.com/understanding-hooks-part-4-hook-c7a8c7185f4e

真正归结为以下片段是如何定义 Hooks 的。

function hook(Hook,...args) {
  let id = notify()
  let hook = hooks.get(id)
  if(!hook) {
    hook = new Hook(id,element,...args)
    hooks.set(id,hook)
  }
  return hook.update(...args)
}

当一个钩子被注册时，它需要一个唯一的 id，如行 notify()。这只是一个普通的 i++ 放在组件内部，钩子写在里面。

所以如果你有一个固定的钩子物理位置，你就有一个固定的 id。否则 id 可能是随机的，并且由于每个渲染周期都会调用渲染 Component 函数，因此随机 id 不会在下一个渲染周期中找到正确的钩子。>

这就是为什么 if 也不能写在 hook 语句之前。试试吧

  const Component = () => {
    const b = true
    if (!b) return null
    const [a] = useState(1)
  }

你应该得到类似的错误。