Skip to content

02.Hooks概况

Hooks存在的意义

在官方文档:https://reactjs.org/docs/hooks-reference.html有下面的说明:

Hooks是React 在16.8版本中新增加的功能,能够使我们在不编写类组件的情况下使用状态以及其他React特性。

在前面的课程中,我们说过,React是组件的世界,而组件又分为类组件和函数组件。在最开始的时候,类组件居于主导地位,函数组件地位相对低下,因为函数组件内部没有像类组件那样类似于this.setState这样的更新机制,也没有像类组件那样有满足在特定阶段执行不同操作的生命周期函数。

随着Hooks的出现,函数组件的能力得到了极大的增强,不仅具备了原先类组件所具备的强大能力,而且相较于类组件还有很多优势,使得现如今日常开发中几乎都用具备Hooks能力的函数组件进行功能开发。

那相较于类组件,引入了Hooks之后的函数组件具备一些什么优势呢?这个问题的答案其实在官方文档已经给出:https://reactjs.org/docs/hooks-intro.html#motivation

  • 类组件,难以重用有状态的逻辑,render props、高阶组件等方式很繁琐
  • 类组件逻辑复杂的时候难以阅读
  • 在Javascript中,类本身就是一个很容易导致错误的概念,比如与大多数编程语言含义都不一样的this
  • React团队在探索性能优化,比如提前编译等技术,类组件容易导致性能优化的效果打折扣

Hooks的本质

有的同学可能会问,老师说了这半天,Hooks很重要我们已经很清楚了,那究竟什么是Hooks呢?这个问题我们先不回答,因为解释起来很抽象,我们通过本章后续小结的案例观察和源码实现去体会,相信能够解答这个问题。

好了,关于Hooks基本情况我们就先介绍到这里,谢谢大家。

基于 VitePress 构建