前言
这几天在忙着家园招新项目的工作，打算深入一下对React的理解，一直听说React Conf 2018提出的proposal——hook非常好用。就打算乘着这次项目来深入理解一下hook。首先回顾下React Conf 2018在介绍hook所讲的内容。
React之前实践中存在的问题
包装地狱（Wrapper Hell）
当我们在项目中复用一些逻辑时，会把一些功能提取出来，成为组件。主要是依靠以下两种模式来复用代码：高阶组件和渲染属性
这两种模式对于部分场景来说是很好的，但也经常带来一个很大的缺点。在较为复杂的场景中，这类方案需要重新组织你的组件结构，这可能会很麻烦，使代码难以理解。而大量的嵌套也导致跟踪app的数据流会非常困难。
其实最根本的原因是React在组件之间复用状态逻辑很难，React 需要为共享状态逻辑提供更好的原生途径。
组件过与庞大（Giant components）
在工程中，我们常常会写一些比较大的组件，而这些大型组件往往很难拆分和重构的，而里面的业务逻辑也分散在组件中的各个方法中，而生命周期中也往往掺杂了不同业务的代码，耦合在一起，让人感到困惑
让人迷惑的Class（Confusing classes）
Hard for humans
在我以前的开发中，经常默认就写class组件的，哪怕是一些非常简单的组件。因为函数组件在需要引入state和生命周期钩子函数的时候，早晚需要将其改写成class组件。其中有很多繁复和无意义的工作。
class组件中的绑定和转化工作也让人非常困惑。在写一些方法时需要不断的将其绑定this的操作也让人非常沮丧。
Hard for machines
class组件对于tree shaking和热加载也带来了很多麻烦。
如果看过压缩后的组件文件，可以看到所有的方法名没有被压缩。一个未使用的方法也很难被跟踪并剔除，机器在编译过程中很难准确判断方法是否被使用。
编译器在优化提升React组件性能时，class组件的一些设计模式也使编译器优化变得更加困难。
Hook
根据React官网文档介绍，Hook是：
- 完全可选的。 你无需重写任何已有代码就可以在一些组件中尝试 Hook。但是如果你不想，你不必现在就去学习或使用 Hook。
- 100% 向后兼容的。 Hook 不包含任何破坏性改动。
- 现在可用。Hook 已发布于 v16.8.0。
不像render props和高阶组件，Hook没有带来不必要的嵌套给组件，也没有mixins那样带来的缺点。
什么是Hook
在了解Hook之前，先回到思考我们是怎么复用代码的。
正是为了代码复用，我们编写组件，组件的功能十分强大，但他们会渲染一些UI，这让他们不方便分享不可见的逻辑，这也导致了render props和高阶组件的出现。有没有什么简单的一样办法让我们复用代码而不是这么多复杂的？
函数似乎非常适合代码复用，在复用中也不会带来很多副作用，但函数并没有本地的React状态。在class组件中你需要重构代码或者引入类似Observables的抽象类，不管哪种方法都伤害了我们追求的简洁
Hook正是解决了这个问题，Hook让我们只需要从一个函数的调用，就能很方便的使用React的一些特性。React提供的内置的一些Hook暴露了React的一些结构，像是state、生命周期和context。
我们也可以很方便的编写一些代码来包装这些内置的Hook，变成我们自己的自定义的Hook。
