irpas技术客

React Hooks 在使用上有哪些限制?_北海屿鹿

未知 4085

React Hooks 的限制主要有两条:

不要在循环、条件或嵌套函数中调用 Hook;在 React 的函数组件中调用 Hook。

那为什么会有这样的限制呢?就得从 Hooks 的设计说起。

Hooks 的设计初衷是为了改进 React 组件的开发模式。

在旧有的开发模式下遇到了三个问题

组件之间难以复用状态逻辑。过去常见的解决方案是高阶组件、render props 及状态管理框架。复杂的组件变得难以理解。生命周期函数与业务逻辑耦合太深,导致关联部分难以拆分。人和机器都很容易混淆类。常见的有 this 的问题,但在 React 团队中还有类难以优化的问题,他们希望在编译优化层面做出一些改进。

这三个问题在一定程度上阻碍了 React 的后续发展,所以为了解决这三个问题,

Hooks 基于函数组件开始设计。

然而第三个问题决定了 Hooks 只支持函数组件。

那为什么不要在循环、条件或嵌套函数中调用 Hook 呢?因为 Hooks 的设计是基于数组实现。

在调用时按顺序加入数组中,如果使用循环、条件或嵌套函数很有可能导致数组取值错位,执行错误的 Hook。

当然,实质上 React 的源码里不是数组,是链表。

为了避免这样的情况,可以引入 ESLint 的 Hooks 检查插件进行预防。


1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,会注明原创字样,如未注明都非原创,如有侵权请联系删除!;3.作者投稿可能会经我们编辑修改或补充;4.本站不提供任何储存功能只提供收集或者投稿人的网盘链接。

标签: #React #hooks #在使用上有哪些限制 #hook #因为 #的设计是基于数组实现