8-3 那些相當重要但故意先不告訴你的地方

作為一本 React 的入門書，這本書的目的是讓你對 React 有一個全面的概念，讓你後續在閱讀 React 的官方文件時，不會覺得不知道從何下手，同時，我希望你能夠越來越習慣閱讀官方文件，未來不論你想要換到哪一個框架或學習其他語言，千萬不要忘了回頭閱讀官方文件，因為那通常會是最清楚詳細的！

下面是一些在 React 中相當重要但在前面內容中刻意不要提到的部分，另外也提供讀者後續可以延伸學習的方向。

提示

本單元中的網址均有列在 Github 專案分支（master）的說明文件中，讀者可以直接透過該說明頁面檢視連結。

關於 React 在本書中刻意先不告訴你的重點#

在 React 中過去多是用 class 在定義元件#

在這本書中，我們都是使用函式來定義元件（Functional Components），因為 React Hooks 的功能讓我們可以把要做的事情都在 Functional Components 內完成，而且只需要有了 JavaScript 中函式的概念後就可以開始學習使用 React，大大降低了 React 的學習門檻；但在還沒有 React Hooks 前，多數的元件都是使用 class 這個關鍵字來定義，因此若想看懂其他人寫的 React 程式碼，還是勢必要回頭補齊 Class-Components 的部分，這裡除了推薦 React 官方的 Getting Started之外，我認為 Codecademy 上關於 React 的教學也可以幫助你補齊這個部分。

在 React 中過去多是透過生命週期在不同時間點做事#

如果你是在 React Hooks 之前就學過 React 的話，一定聽過「生命週期」這個東西，最常見的像是 componentDidMount、componentDidUpdate 和 componentWillUnmount，但在 React Hooks 之後，這些多能被 useEffect 替代，但生命週期的概念並非不重要，只是知道這些，在學習 React Hooks 的 useEffect 時可能把自己困住，如同本書第一章所說的，有些時候過去學過的東西，反而會讓你學新事物的時候綁手綁腳，而現在是你可以在 React 的世界中，了解生命週期使用方式的時候了！

持續學習的方向#

React Router#

本書主要著重在 React 框架本身，但作為一個完整的 SPA（Single Page Application），要處理的事情往往不僅是幾個頁面的資料交換與處理，當一個網頁的頁面越來越多時，開始會需要有「路由」的概念進來，讓使用者可以直接透過網址直接進到某一個頁面，這時候就會需要使用到的 React Router 這個工具。

Redux#

此外，在一個完整的應用程式中，元件和頁面之間都會變得更龐大，元件與元件間的資料傳遞會變得更複雜，有時候直接把資料一直用 props 的方式傳入子層元件可能不再是最適當的做法，而是需要一個資料的「中控中心」，所有的元件都可以向這個中控中心取得該元件所需要的資料，這時候將會需要使用到 Redux 這個工具。

React Testing#

越是大型的專案越需要去撰寫測試，避免自己或多人合作時，改了某一元件導致其他頁面或元件發生錯誤的情況，這時候你可能會需要像是 React Testing Library 這類的工具來撰寫 React 元件的測試。

Progressive Web App#

在本書的後面幾個單元中，我們透過 React 完成了一個完整的 Web App，現在仍然需要使用者自行設定所在地區，但你也可以透過瀏覽器提供的 Geolocation API 來偵測使用者所在的位置，自動幫使用者選擇該地區的天氣資訊；若你對於 Progressive Web App 能在手機上執行的更多功能，或者希望能夠添加推播通知等等，則可以進一步閱讀和 Progressive Web App 相關的說明。

最後，不要被過去所認識的世界束縛你#

這點說起來好像很容易，但平常我有在看手機版習慣，最常看到「從 iOS 跳到 Android」或從「Android 跳到 iOS」的使用者在抱怨：「為什麼我以為用 ooo 有這個功能，換過來 xxx 之後都沒有」。

可是多數時候，當你仔細去看使用者提出的問題後，會發現其實兩個系統都有相同或類似的功能，只是可能要在不同的地方才能找到。當你一直用原本的習慣想要去接觸新事物時，將會使得你窒礙難行，但若你可以用「新事物」的角度上網查一下，常常就會發現原來換過來後也有這個功能呀！好用！

上面這些話其實是在跟我自己說的，在學習的過程中，我常對於「能達到同樣功能但卻需要用不同方式」而感到厭煩。剛開始學網頁的時候，常會覺得 HTML, CSS, JavaScript 彼此三個不是活得好好的話，為什麼後來要出模板語言（Pug、Mustache、Handlebars、EJS）、為什麼後來要有 CSS 前處理器（SASS、SCSS、PostCSS）、為什麼要有前端框架，反正後來都還是編譯成 HTML, CSS 和 JavaScript 不是嗎？

在還沒有熟悉它們之前，的確會覺得「麻煩」，覺得「阿我就繼續用 ooo 就好了啊」！但實際上這些工具很多都是（當時）為了想要解決某些問題而生。想像過去的我若執著於功能都一樣，而繼續用原本單純的 HTML、CSS、JavaScript，那麼不只很難繼續進步，同時也無法體會到這些工具帶給我們的愉快感和成就感。

所以，不要害怕那些許許多多聽過、沒聽過的術語和詞彙，不懂的就記下來，有需要時再找個時間再來弄懂它，就是這樣。不要被過去所認識的世界束縛你，一起共勉。

Edit this page