Hook 就是 JavaScript 函数 他让函数组件拥有生命周期和状态等,原本 在Class 组件中才提供的功能
这篇文章主要是介绍 可以访问我另一篇博客有 Hooks的具体使用
可以理解为通过 Hooks 为函数组件钩入 class 组件的特性
但是使用它们会有两个额外的规则:
- 只能在函数最外层调用 Hook。不要在循环、条件判断或者子函数中调用。
- 只能在 React 的函数组件中调用 Hook。不要在其他 JavaScript 函数中调用。
Hooks 前后,组件开发模式的对比
- React v16.8 以前: class 组件(提供状态) + 函数组件(展示内容)
- React v16.8 及其以后:
- class 组件(提供状态) + 函数组件(展示内容)
- Hooks(提供状态) + 函数组件(展示内容)
- 混用以上两种方式:部分功能用 class 组件,部分功能用 Hooks+函数组件
class 组件自身的问题
在根据状态来渲染UI这件事上,class 组件并没有发挥它最重要的功能:
- 组件之间很少继承
- 组件之间很少相互访问
函数式组件的好处
- 函数本身比较简单,更好的胜任根据状态来渲染UI这件事
- hooks让函数组件内部有了维护状态的能力
- hooks带来了组件的逻辑复用能力