React Hooks启航篇

一、react介绍

　　react作为应用最广泛的前端开发类库之一，不仅有着极其丰富的用户界面，而且非常容易上手。同时，在其他前端应用发生翻天覆地的变化的时候，他的功能却异常的稳定。正应如此，无论从事前端开发，还是以后端为主但也需要自己做一些UI界面，react基本上就是你的首选。

　　最重要的是，react在16.8版本中引用了hooks。hooks带来的全新机制让人耳目一新，因为他进一步拓展了react的开发思路，为前端开发提供了一种更优秀的选择。要知道hooks的两大好处就是业务逻辑重用和关注业务分离。所有在引入hooks的概念之后，函数组件就具备了状态管理、生命周期管理等能力，他几乎可以实现原来class组件具备的所有能力，而且还解决了class组件存在的一些代码冗余、逻辑难以重用等问题。

　　不过也肯定有很多人会有这样的疑问：转化hooks的开发思路难不难？现在的项目代码都是class的，难道都得改一遍吗？我要先给你吃一颗定心丸。转化hooks的开发思路并不男，重要的是在实际中不断应用。而原来的项目代码也不需要修改，应为函数组件能够和已有的class组件无缝衔接，一起工作。你只需要根据具体采用hooks的方式去写新的代码就好了，转换成本很低。

　　hooks的优点：

1.让前端代码结构更清晰

　　举个例子来说。在hooks出现之前，业务逻辑的重用可以说是react开发的一大痛点和难点，比如，你要监听组件窗口大小的变化，以便对布局大调整。那么我们就要子啊类组件的不同生命周期去做事件监听的绑定和解绑。

　　其中的困难和复杂程度课可以想象，毕竟，这种需要在不同的方法中的逻辑是很难重用的。因此我们不得不借助高阶组件这样复杂而晦涩的设计模式来解决。

　　但现在，有了hooks，我们就能轻松的应对了。我们用hooks就可以非常自然的去解决。我们只需要通过hooks的方式进行封装，将其变成一个可绑定的数据源。这样当窗口的大小发生变化时，hooks的组件会自动重新渲染。同时，代码也更加易懂，并且不会产生额外的组件节点。

　　可以说，引入hooks的概念以后，函数组件就具备了状态管理、生命周期管理等能力，几乎可以实现原来的class组件具有的所有能力。函数组件能和已有class组件无缝衔接，一起工作。目前，在整个react生态中，几乎所有开发项目都已经时围绕这hooks展开的了。

二、从函数组件和hooks的角度触发重新认识react

　　初次接触hooks的同学来说，肯定会经常遇到各种问题。比如：

为什么编译有不过了？

我的函数组件怎么又死循环了？

redux的store要怎么访问？

有这些问题是很正常的，因为class组件到函数组件的转变，不仅仅是一个写法的区别，更是整个开发思路的转变。而我们只有学会用hooks的角度去思考问题，才算把这条路真的走顺

　　如何学好react hooks

　　对于react Hooks而言，在我看来最重要的是准确的知道hooks的功能边界，也就是知道他能做什么。否则，就可能陷入什么功能都想用hooks去做的，或者在最适合使用hooks的功能中，却不想用它去处理。

在建立起对hook的全局知识认知之后就要掌握核心概念和原理了，任何计数，脱离了原理本身，学到的大概知识皮毛。原理或许不能让你既学即用，但这却是你应对实际复杂业务问题的关键能力。

三、总结

　　hooks作为react自诞生以来最大的一个新功能，而他也一定程度上更好的体现了react的开发思想，即从state=>view的函数式映射。此外，hook也解决了class组件存在的一些代码冗余、难以逻辑复用的问题。这两种方式再react开发中几乎是完全等价的，没有绝对的优掠。如果你决定开始使用hooks，那么对于已有的class组件，其实是完全没必要立刻重构的。只要再新的功能上，再来使用函数组件合hooks就可以了。