这是我参与8月更文挑战的第25天,活动详情查看:8月更文挑战
Hook是React16.8的新增特性,它可以让我们不使用类组件的情况下使用state以及其他的React特性。
React Hooks介绍
React Hooks是用来做什么的?
对函数型组件进行增强,让函数型组件可以存储状态,可以拥有处理副作用的能力,让开发者在不使用类组件的情况下,实现相同的功能。
什么是副作用?
上文提到了副作用这一概念,下面我们来讲解下什么是副作用,我们只需要记住只要不是把数据转换为视图的代码那么就属于副作用,例如下面的副作用例子。在类组件中,我们通常使用生命周期钩子函数来处理这些副作用,但是在函数型组件中可以使用Hooks来帮助我们处理副作用
- 获取DOM元素
- 为DOM元素添加事件
- 设置定时器
- 发送ajax请求
类组件的不足(Hooks要解决的问题)
- 类组件缺少逻辑复用机制
类组件一般采用高阶组件来复用逻辑,为了复用逻辑增加了无实际渲染效果的组件,增加了组件层级,显示十分臃肿,增加了调试的难度以及降低了运行效率。
- 类组件有时候很复杂难以维护
有时候需要将一组相关的业务逻辑拆分到多个生命周期函数中,或者在一个生命周期函数内存在多个不相关的业务逻辑。
- 类成员方法不能保证this指向的正确性
当我们给一个元素绑定事件的时候,在事件处理函数当中如果需要更改状态,通常需要更改这个函数的this指向,否则可能指向undefined.