从react官方文档我们知道“React 依赖于 Hook 的调用顺序” https://reactjs.org/docs/hooks-rules.html#explanation。那么，如果我想有条件地调用它，那么为钩子“保留”一个位置有什么问题吗？
function Component({flag, depA, depB}) {
if (flag) {
// just "reserving a spot"
useEffect(() => {}, [null, null])
} else {
useEffect(() => {
// ... actual hook
}, [depA, depB])
}
return <></>
}
如果这有效，它也适用于useCallback? useLayoutEffect? useMemo? useImperativeHandle?
我已经测试了所有这些，并且在更复杂的上下文中，即使 linter 抱怨，它似乎也能工作。我错过了什么吗？
PS：如果像这样看起来有点没用，那是因为最终目标是让钩子的主要部分延迟加载import()，在导入被触发并解决之前，只需为钩子保留位置即可。
我今天刚好在想这个问题。我相信，虽然它“违反了规则”，但 React 无法区分两者之间的区别。
因此，虽然它违反了规则，但如果你有足够充分的理由，了解其中的风险，那么“规则”就只是教条。
React 通过计算调用次数基本上知道哪个 useEffect 钩子是哪个。呼唤useEffect有条件地不好，特别是因为次数useEffect被叫不能改变。
你的例子是有条件的，但 React 无法检测到它，因为在任何一种情况下你都调用它一次。
然而，你提到的例子似乎不需要这个。有充分的理由以“正常”方式做事，因为正如您从其他评论者那里看到的那样，这会导致混乱和惊喜，而我们不喜欢惊喜 =)
如果您延迟加载某些功能，只需让您的useEffect钩子调用该函数时is ready.
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
