这是我参与8月更文挑战的第25天,活动详情查看:8月更文挑战
Hook是React16.8的新增特性,它可以让我们不使用类组件的情况下使用state以及其他的React特性。
React Hooks介绍
React Hooks是用来做什么的?
对函数型组件进行增强,让函数型组件可以存储状态,可以拥有处理副作用的能力,让开发者在不使用类组件的情况下,实现相同的功能。
什么是副作用?
上文提到了副作用这一概念,下面我们来讲解下什么是副作用,我们只需要记住只要不是把数据转换为视图的代码那么就属于副作用,例如下面的副作用例子。在类组件中,我们通常使用生命周期钩子函数来处理这些副作用,但是在函数型组件中可以使用Hooks来帮助我们处理副作用
- 获取DOM元素
- 为DOM元素添加事件
- 设置定时器
- 发送ajax请求
类组件的不足(Hooks要解决的问题)
-
类组件逻辑复用可能带来很多问题。在class组件中,一般通过HOC高阶组件和render props。将逻辑封装到一个抽象层组件中,所以使用多个复用逻辑时可能会形成抽象层组件的“嵌套地狱”,而hooks复用的逻辑则很简单。
-
通过class编写组件,业务逻辑会分散到不同的生命周期函数中,而使用hooks编写组件,业务逻辑集中在函数中,大大降低了组建封装的复杂度。
-
类组件中JSX默认不会绑定this,function只有在调用那一刻才知道this指的是谁,需要使用箭头函数来解决这个问题。