Day1-铁人赛大纲 & 为什麽要使用 Hook?

铁人赛大纲

在这次铁人赛的挑战中，主要的目标是希望自己和读者们可以更加认识 React.js 或者是复习一下以前学过的知识，所以安排了几个单元来进行介绍，预期介绍的单元如下:

1. React hooks(会带到 React Context)
2. React 表单验证
3. Redux & Redux toolkit
4. React Router v5
5. React 动画
6. 其他琐碎 React 特性功能

注: 本系列挑战文会全部以 functional component 去做介绍

为什麽要使用 Hook?

那在进入 React hooks 单元前，先来了解一下什麽是 hook?为什麽要使用 Hook?

在 React.js 的官网提到

Hook 是 React 16.8 中增加的新功能。它让你不必写 class 就能使用 state 以及其他 React 的功能。

1. 开发者不用再写 class component

透过一些 React hooks，我们可以补足 function component 不能进行 react 生命周期和不能控制 state 的缺点，进而全部使用 function component 去进行开发，程序码可以写得比 class component 更简洁一点。

2. 提升状态逻辑的重用性

在过去，使用 class component 时需要使用 HOC(Higher Order Component) 与 Render Props 去进行 Code Reuse，但多层的 HOC 会造成 wrapper hell，维护性不佳。

但我们现在可以将和某个小功能相关的程序码逻辑放在同一个 hook 里面，让不同的元件需要该小功能时，就可以使用该 hook，减少程序码的重复性，也更方便维护该功能。

每次呼叫一个 Hook 时，都会有一个完全独立且隔离的 state，所以你甚至可以在一个 component 使用同一个客制化 Hook 两次

使用 hook 的限制

看起来 hook 确实很强大，但它也有些使用上的限制:

1. 只在元件最上层使用 Hook，不能在 loop、条件判断、nest function(在 function scope 中宣告的 function)调用hook。
2. 名称必须是以 use 开头，包括自己建立的 custom hook 也是
3. 只在 React function component 呼叫 Hook

在我们了解 hook 是什麽及为什麽要使用它後，接着就来认识一下有哪些 hook 吧!