本篇會開始提及 React 本身的基本用法和使用觀念，大概會提個三四篇，和去年不同的是，所有範例都會使用 Hooks ，如果有任何問題再麻煩留言告訴我，謝謝！
Hooks 是今年年初放上正式版的，它出現在 React v16.8 版本，而在它出現前，撰寫 Component 的首要手段就是使用 Class，例如：
也許看到上方的例子，可能會想說：
我還是可以使用 Function Component 啊！
Umm...是這樣沒錯，但如果 Main 是一個計數器呢？擁有自己的 State 的那種：
噢，那這看起來還是得用 Class。
在非 Hooks 時代你應該會這麼想，或者該說：「你只能這麼想。」
也許上方的例子還不夠觸動對 React 不熟的讀者，認為我從小看到的 React 就是這樣，
是不會怎麼了，因為官方也有提到說，Hooks 的更新是向下相容的，並非得學習使用 Hooks，你仍然可以在 Class 上揮灑青春。
與其解釋，不如直接繼續向下，用體感感受申裝 Hooks 後的 Main 會變得如何。
關於 Function Component 的部分，之前也被稱作為 Stateless Component（無狀態組件）。
Stateless Component 就如同字面，在該 Component 中，無法使用 State 或 Life，雖然它還是能接收 Props，然後回傳一個 Dom。
就以計數器的例子來對照， Hooks 會這麼做：
是不是乾淨多了？使用了 Hooks，便不需要再確認 this 的指向是否正確，且在更新的時候也不需再用 this.setState 更新整個 State，因為在 Hooks 中，每個 State 都是分開來的，怎麼設計都取決於開發者。
然後其實有些人會擔心，Hooks 的生態圈是不是和 Class Component 一樣，會不會碰到目前套件無法使用的狀況，
最明顯的就是 Enzyme ，這是用來對 Component 做 Render 測試的套件，但是在 Hooks 剛出現時，他無法快速應對新環境帶來的衝擊，所以在那時我便放棄他了。
因為 Hooks 的出現在 React 的生態圈中是一個趨勢，上方提到的 Enzyme 的作者，包含使用該套件的開發者，在發現問題後，都不斷地投入心思處理，至今也完成了大部分對 Hooks 的支援：
issue 來源： https://github.com/airbnb/enzyme/issues/2011
所以真的不用擔心， Hooks 的陣痛期在這半年過的差不多了，基本的套件都有辦法找到出路，各位就放心學吧！如果真的不行的話，就來 iThelp 勇敢發問吧！踩坑也是大家一起對吧 XD！
至於真的有人上 Hooks 到專案裡了嗎？
至少筆者的社群圈內，React 一釋出 Hooks 正式版本更新，大家就都沸沸揚揚的討論使用心得，甚至是直接拔掉 Redux 的開發者也有 相關文章 （但建議熟悉基本的 React 和 Redux 後在閱讀會比較容易了解）。
本篇文章讓大家稍微了解 Hooks，如果有漏講的觀念，或是好奇什麼，再麻煩各位留言告訴我！謝謝大家！
明天起的章節會從 useState 開始，讓大家習慣新生的 React。
請問神Q大大的Day07 src裡面的Position資料夾裡頭的index.jsx和src資料夾本身的index.jsx有什麼差別嗎?
裡面的程式碼都是
import React, { useState } from 'react';
const Main = () => {
const [count, setCount] = useState(0);
return (
<>
<h1>{count}</h1>
<button
type="button"
onClick={setCount(count + 1)}
>
點我加一
</button>
</>
);
};
差別在於index.jsx有匯出Main這一個元件外，請問這部分是一定要撰寫的嗎? 因為我要把Position Folder移到其他地方，一樣可以執行，所以有點好奇神Q大這樣做的原因，謝謝您。
iThome鐵人賽
看影片追技術