Hook是什么，React为什么要引入Hook

简介

Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。Hook 是向下兼容的。
Hook 是一些可以让你在函数组件里“钩入” React state 及生命周期等特性的函数。Hook 不能在 class 组件中使用 —— 这使得你不使用 class 也能使用 React。

动机

在组件之间复用状态逻辑很难
React 没有提供将可复用性行为“附加”到组件的途径（例如，把组件连接到 store）。
你可以使用 Hook 从组件中提取状态逻辑，使得这些逻辑可以单独测试并复用。Hook 使你在无需修改组件结构的情况下复用状态逻辑。这使得在组件间或社区内共享 Hook 变得更便捷。
复杂组件变得难以理解
我们经常维护一些组件，组件起初很简单，但是逐渐会被状态逻辑和副作用充斥。每个生命周期常常包含一些不相关的逻辑。
Hook 将组件中相互关联的部分拆分成更小的函数（比如设置订阅或请求数据），而并非强制按照生命周期划分。你还可以使用 reducer 来管理组件的内部状态，使其更加可预测。

难以理解的 class
你必须去理解 JavaScript 中 this 的工作方式，这与其他语言存在巨大差异。还不能忘记绑定事件处理器。
class 不能很好的压缩，并且会使热重载出现不稳定的情况。因此，我们想提供一个使代码更易于优化的 API。
为了解决这些问题，Hook 使你在非 class 的情况下可以使用更多的 React 特性。从概念上讲，React 组件一直更像是函数。而 Hook 则拥抱了函数，同时也没有牺牲 React 的精神原则。Hook 提供了问题的解决方案，无需学习复杂的函数式或响应式编程技术。

Hooks API

基础 Hook
- useState
- useEffect
- useContext
额外的 Hook
- useReducer
- useCallback
- useMemo
- useRef
- useImperativeHandle
- useLayoutEffect
- useDebugValue

State Hook
useState 会返回一对值：当前（状态和一个让你更新它的函数。它类似 class 组件的 this.setState，但是它不会把新的 state 和旧的 state 进行合并。
useState 唯一的参数就是初始 state
可以在一个组件中多次使用 State Hook
数组解构的语法让我们在调用 useState 时可以给 state 变量取不同的名字。

Effect Hook
useEffect 就是一个 Effect Hook，给函数组件增加了操作副作用的能力。它跟 class 组件中的 componentDidMount、componentDidUpdate 和 componentWillUnmount 具有相同的用途，只不过被合并成了一个 API。
由于Effects函数是在组件内声明的，所以它们可以访问到组件的 props 和 state。
默认情况下，React 会在每次渲染后调用Effects函数 —— 包括第一次渲染的时候。
Effects函数还可以通过返回一个函数来指定如何“清除”副作用。
通过使用 Hook，你可以把组件内相关的副作用组织在一起，而不要把它们拆分到不同的生命周期函数里。
其他Hook:
useContext():让你不使用组件嵌套就可以订阅 React 的 Context。
useReducer():可以让你通过 reducer 来管理组件本地的复杂 state。

Hook 使用规则

Hook 就是 JavaScript 函数，但是使用它们会有两个额外的规则：
只能在函数最外层调用 Hook。不要在循环、条件判断或者子函数中调用。只能在 React 的函数组件中调用 Hook。不要在其他 JavaScript 函数中调用。（还有一个地方可以调用 Hook —— 就是自定义的 Hook 中，我们稍后会学习到。）

提问

React 是如何把对 Hook 的调用和组件联系起来的？
React 保持对当前渲染中的组件的追踪。每个组件内部都有一个「记忆单元格」列表。它们只不过是我们用来存储一些数据的 JavaScript 对象。当你用 useState() 调用一个 Hook 的时候，它会读取当前的单元格（或在首次渲染时将其初始化），然后把指针移动到下一个。这就是多个 useState() 调用会得到各自独立的本地 state 的原因。

Hook 会因为在渲染时创建函数而变慢吗？
不会。在现代浏览器中，闭包和类的原始性能只有在极端场景下才会有明显的差别。
除此之外，可以认为 Hook 的设计在某些方面更加高效：1. Hook 避免了 class 需要的额外开支，像是创建类实例和在构造函数中绑定事件处理器的成本。2. 符合语言习惯的代码在使用 Hook 时不需要很深的组件树嵌套。这个现象在使用高阶组件、render props、和 context 的代码库中非常普遍。组件树小了，React 的工作量也随之减少。
传统上认为，在 React 中使用内联函数对性能的影响，与每次渲染都传递新的回调会如何破坏子组件的 shouldComponentUpdate 优化有关。Hook 从三个方面解决了这个问题。

useCallback Hook 允许你在重新渲染之间保持对相同的回调引用以使得 shouldComponentUpdate 继续工作：

// 除非 `a` 或 `b` 改变，否则不会变
const memoizedCallback = useCallback(() => {doSomething(a, b);
}, [a, b]);

useMemo Hook 使得控制具体子节点何时更新变得更容易，减少了对纯组件的需要。
useReducer Hook 减少了对深层传递回调的依赖，正如下面解释的那样。

总结，引用转载自官网
https://react.docschina.org/docs/hooks-intro.html#no-breaking-changes