reactjs - React 自定义钩子(Hook)与普通函数,有什么区别

标签 reactjs react-hooks

我正在尝试自定义钩子(Hook)。我理解普通的钩子(Hook)就可以了,但我的问题是,在编写自定义钩子(Hook)时,它和普通函数有什么区别?我的意思是为什么不将其称为普通函数,而不是将其称为 use* 之类的东西

最佳答案

我相信没有人准确回答你的问题。我仍然了解拥有这个称为钩子(Hook)的额外功能的好处和目的,但我仍然可以分享我的理解。

React Hooks 是具有 React 功能的 JS 函数,这意味着您可以添加一些也可以添加到普通 JS 函数中的逻辑,而且您还可以使用 native 钩子(Hook),如 useState、useEffect 等,增强该逻辑,添加它的状态,或者添加它的副作用、内存等等。 所以我相信钩子(Hook)确实是一个很好的东西,可以以隔离的方式管理组件的逻辑。

因此,您可以有一个 foo.component.js (UI)、一个 useFoo.js(logic),其中 useFoo 可能包含许多 js 函数和一个用于管理该函数并返回其应有内容的钩子(Hook)。

这是一个关于 React Hooks 的精彩视频,强烈推荐

https://youtu.be/J-g9ZJha8FE

关于reactjs - React 自定义钩子(Hook)与普通函数,有什么区别,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60133412/

相关文章:

javascript - React 和 d3 组合防止 mousedown 事件

Reactjs onClick 事件如何从列表中选择特定按钮

reactjs - 如何仅在输入中搜索时显示数据?

reactjs - 为什么我的 React JS 代码在满足这两个条件的情况下会进入无限循环?

reactjs - useEffect hook - 依赖项 - 重新渲染问题

reactjs - RTK useLazyQuery 触发 onClick 数据未刷新

javascript - 我无法安装我的项目包

css - 为什么我的 css 类不加载?

javascript - 有条件的 onclick 函数在没有点击的情况下触发?

javascript - 我如何正确使用 useEffect 进行带有反应的异步获取调用? react 钩子(Hook)/详尽的deps