如何解决这个“自定义反应钩子”是否违反了钩子法?
我在 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)
}
你应该得到类似的错误。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。