理解 React Hooks 的使用

Hook 是 React 16.8 的新增特性。它可以让你在不编写 `class` 的情况下使用 `state` 以及其他的 React 特性。

一、为什么需要 React Hook

Hook 提案出来前，React 团队总结:了三个 React 比较糟糕的地方：

一是，组件间状态和逻辑的复用很难。有两个复用方案，一个是使用 Render Props，另一个是使用 高阶组件，但它们都需要重新组织组件结构，过多的组件间嵌套会形成“包装地狱”，这会令组件间状态的跟踪非常困难。

二是，随着项目维护，很容易出现拥有相当多逻辑的大型组件，它们充斥着状态逻辑与副作用，并且每个生命周期方法中包含着不相关的逻辑，这很容易产生 bug。

三是，为了使用 state 和生命周期方法，就必须要使用 class 组件，而理解 class 需要较高的成本，并且 class 在编译时不能很好地被压缩（方法名无法被压缩，而且也不会剔除掉没有使用过的方法），class 也会让热加载变慢。另外，对于开发者来说，也很难去区分何时该用 class 组件而何时该用 function 组件。

对于第一点，我们需要复用组件间有状态的逻辑，但又不想修改组件的层级；对于第二点，我们不想将本应独立的逻辑拆分在不同的生命周期方法中；对于第三点，我们需要在避开class的情况下在组件中使用更多的 React 特性。

而 React Hook，就能解决以上三个问题

二、使用 React Hook