React Hooks

React Hooks 是 React v16.8 中新添加的特性，这个特性主要是对函数型组件的功能进行增强，让函数型组件可以做类组件做的事情。

这个篇文章主要包含三个部分：

1. 什么是react hooks

   1. react hooks 主要包含哪些功能，要解决哪些问题。

2. react hooks 的使用

   1. react hooks 到底是什么
   2. 这些函数要在什么场景下使用

3. 自定义 react hooks

   1. 通过自己定义函数，如何将组件内部的公共逻辑提取出来

1. 什么是 React Hooks

1.react hooks 功能介绍

对函数组件进行增强，让函数组件可以储存状态，可以拥有处理副作用的能力，让开发者在不使用类组件的情况下，实现相同的功能。

副作用：在组件中不是将数据转换为视图的代码被称为副作用。

比如：获取DOM元素、为DOM元素添加事件、设置定时器以及发送Ajax请求等，这都属于副作用。

2.类组件的不足

1. 缺少逻辑复用机制

   1. 为了复用逻辑增加无实际渲染效果的组件，增加了组件层级显示十分臃肿，增加了调试的难度以及运行效率的降低。

2. 类组件经常会变得很复杂难以维护

   1. 将一组相干的业务逻辑拆分到多个生命周期函数中，例如：1.在组件挂载时要做些什么 2.更新完成之后要做些什么
   2. 在一个生命周期函数内存在多个不相干的业务逻辑
   3. 类成员的方法不能保证this指向的正确性，例如：在声明一些函数要使用bind进行绑定，或者嵌套函数来解决this指向的问题

2. React Hooks 的使用

Hooks 意为钩子，React Hooks 就是一堆钩子函数，React 通过这些钩子函数对函数组型件进行增强，不同的钩子函数提供了不同的功能。

react hooks 提供的钩子函数有：

• useState()
• useEffect()
• useReducer()
• useRef()
• useCallback()
• useContext()
• useMemo()