[ Day 14 ] 佳评如潮的 React Hooks

今天总算进入到了 React.js 中大名鼎鼎的 React Hooks 这个章节了！

这样讲可能很浮夸，但是当初在选择框架学习时我就已经在搜寻引擎当中看到非常多 React Hooks 的介绍了。当时只会写原生 JavaScript 的我看得似懂非懂，但是你可以在众多文章里面看见前辈们对它是各种的赞誉不绝，甚至还有人表示对 React Hooks 一见锺情的都大有人在。

所以现在你可以想像 React Hooks 的出现对 React.js 的开发者来说是一件多麽美好的事了吗？那我们就赶快开始吧！

React Hooks

在 Function Component 中实现操作元件的 State 和各种生命周期方法的功能。

在 2019 年， React.js 发布了 V16.8 的版本并宣布加入了新功能 React Hooks ，从此 Function Component 的命运就大大翻转了。

大家还记得我们在 Class Component 的章节中有介绍过 React.js 两种元件类型之间最主要的差别为何吗？没错，就是针对元件的 State 以及生命周期等方法都是只能应用在 Class Component 里的。但是， React Hooks 的出现让我们能够将这些我们原本在元件内常用的功能也应用在 Function Component 中。

所以简而言之， React Hooks 的出现让 Function Component 也开始可以拥有自己的 State 和生命周期了！不只如此， Function Component 原本的撰写方式就比较接近 JavaScript 的 Function ，所以能够让元件看起来更加简洁和明了。因此这项新功能的加入简直是让 Function Component 的声势在 React.js 开发者当中水涨船高！

备注：如果对於 Class Component 和 Function Component 的概念不清楚的话，可以参考前几篇的介绍喔！附上传送门给大家！

为什麽有 React Hooks 的出现？

由於我在撰写这系列文之前真的完全没有碰过 React.js ，所以由我分享心得好像不是那麽合适。因此我从官方文件和前辈的众多好文当中来跟大家说明一些初学者也能理解 React Hooks 诞生的原因：

1. Class Component 越写越庞大，越写越复杂

随着我们开发的专案大小跟需要的新功能逐渐增加，你撰写的元件只会越来越多。而且如果元件需要处理资料和功能的话势必得使用唯一可以操作 State 和相关的生命周期的 Class Component 来做撰写，像是在 componentDidMount() 中如果绑定监听事件的话要记得在 componentWillUnmount() 中解除绑定的监听。这样就会像官方文件中所提到的状况，你会在一个元件内撰写许多不相关的逻辑在同个 Function 内，各种功能全部都混合在一起。

因此， React Hooks 打造了不同的 Functions 让你能够将相同的逻辑和功能汇整在一起，而不再是使用生命周期所提供的方法来分开撰写了。

2. Class 语法的门槛

之前的篇幅有提过，以往要使用 State 和生命周期都是要使用 Class Component，而 Class Component 是采用 JavaScript ES6 的 Class 语法糖所撰写的。所以你会需要先对 ES6 的 Class 结构有一定的基础和了解，因为它必须要使用 extends 来继承 React.js 所定义的 Component 物件才能做使用。

另外你也因此需要在 Class Component 中大量的使用 this 指向到该元件的实体来做其他操作，不过 this 在 JavaScript 中一直都是一个比较难以一时半刻理解的概念，所以这也是为什麽官方文件中提到说他们发现 Class 对於学习 React.js 的初学者是一大障碍的原因。

这点我个人算是蛮有共鸣的！因为我在刚开始看 React.js 的文件和搜索资料看到元件的时候，也花了一点时间回去复习 ES6 的 Class 语法糖。但是看到 Function Component 的时候却觉得非常熟悉，因为它就是 JavaScript 的 Function 。

今天先让大家对 React Hooks 有一个基本的概念，明天就要进入到第一个 React Hooks ： useState 了！
如果有任何问题都非常非常欢迎提出和指教唷～
那我们下篇见ʘ‿ʘ