最近在臉書上的前端社群看到了一篇文章：理解 React useEffect 02，內容是有關於 useEffect 的使用方式，後來在留言串也有了一些討論。
其實當初第一眼看到這篇文章的用法，我也是覺得有些奇怪，不過我其實多少能夠理解為什麼是這樣寫，只是還是覺得怪怪的。原本想留言，但是後來覺得「搞不好奇怪的是我」，就想說再思考一下。仔細思考過後，奇怪的還真的是我。
因此這篇來講一下我的想法，有錯的話歡迎在文章底下留言指正，或是在前端社群跟我討論也可以。在繼續閱讀之前，建議先看過上面那篇原文以及原文底下的討論，才會比較進入狀況。
如果你想把東西存在網頁前端，也就是存在瀏覽器裡面，基本上就是以下這幾個選項：
後兩者應該滿少用到的，而最後一個 Web SQL 也早在幾年前就被宣告已經不再維護了。因此在談到儲存資料的時候，大部分的人提的還是前三種，其中又以前兩種最多人使用。
畢竟在前端儲存資料時，大部分資料都希望能儲存一段時間，而 cookie 跟 localStorage 就是被設計在這種情形下用的，可是 sessionStorage 不是，它只適合儲存非常短期的資料。
不知道大家對 sessionStorage 的理解是不是跟我一樣，先說說我的理解好了：
sessionStorage 跟 localStorage 最大的差別在於前者只會存在於一個分頁當中，你分頁關掉之後資料就清除了，所以新開分頁，就會有新的 sessionStorage，在不同分頁不會共用。但後者如果是相同的網站，可以共用同一個 localStorage
但我想問大家的是：有沒有可能有一種情況，我在分頁 A 的 sessionStorage 存了一些東西，然後有一個新的分頁 B，也可以讀到分頁 A 的 sessionStorage？
你可能以為沒有，我以前也以為沒有，我同事也這樣認為。
但偏偏就是有。
之前在公司裡面做一些效能上的調整時，無意間發現了一個奇怪的現象，繼續往下追查之後才發現是個好像沒有被什麼人發現過的 bug，而且成因我覺得挺有趣的，就想說可以寫一篇跟大家分享一下。
這篇技術含量不高，可以抱持著看故事的心態來看這篇，會比較有趣一點。
故事的起源呢，是之前在公司裡面要做一些網站上的調整，試著增進一下載入的速度。當我們談到性能最佳化這一塊，其實有很多可以做的，例如說跟 Server 那邊比較有關的是：
不過以上都需要後端或是 SRE 的協助，跟前端其實關係不大。跟前端關係比較大的，也可以分成很多面向來看，例如說以「減少資源」的角度來看，可以做的事情有：
如果以「加速載入重要資源」的角度，可以加上 preload 或是 preconnect 這些 hint，來提示瀏覽器哪些東西應該先被載入。
還可以從「減少 JS 執行時間」的角度來看，例如說如果是寫 React，可以用 shouldComponentUpdate、PureComponent 或是 memo 來減少不必要的 re-render。
這一篇既然標題都寫 styled components 了，主題當然就是圍繞在 CSS 這一塊。
要學習一個新的東西，光用看的還真的沒什麼用，直接動手下去做才是比較好的方法。因為上一份工作快離職時 React hook 才剛出來，所以我之前從來沒寫過 hook，只有看過一些基本的教學而已。而前陣子開始工作之後，才終於開始寫 function component + hook。
雖然剛開始還是滿懷念 class 的寫法，但寫久之後覺得 hook 也挺不錯的。在使用 hook 的過程中也有碰到一些剛轉換的人常碰到的問題，仔細研究後發現這篇文章要提的案例還滿不錯的，如果能夠理解這個案例，應該就可以掌握到 class 與 function component 根本上的不同，因此寫了這篇來記錄一下心得。
話說如果你已經寫 function component 一陣子，hook 也用得滿習慣的，而且都有把官方文件還有 dan 哥的文章好好看過，基本上不會從這篇文章獲得任何新知識。這篇適合的對象是剛轉換到 function component，而且不太確定跟 class 的差異是什麼的人。
如果有先寫過其他 function 不是 first-class 的程式語言，在寫 JavaScript 的時候應該會經歷一些陣痛期，想說到底在做什麼——至少我是這樣的。
我當初發現可以把 function 當作參數到處傳遞的時候，對於比較複雜的 code 就要想很久，而 function 的其他行為也是讓我一頭霧水，例如說 function 居然也是 object，還有 this 到底是什麼鬼東西。
這一篇主要是想分享一些我覺得 function 比較有趣的地方。可是呢，直接開始講一大堆知識太無趣了，我希望能引起大家對這些知識的好奇程度，而想要引起好奇，最好的方法就是提供一個「你也會感興趣的問題」，你就會有動力繼續往下看了。
因此底下就以幾個小問題作為開場，雖然是問題的形式，但答不出來也完全沒有關係，如果你對這些問題的答案有興趣的話再往下看，沒興趣的話出口直走到底左轉。
話說這篇標題本來想取叫：「JavaScript function 知多少」或是「有趣的 JavaScript function」，但這種標題太無趣了，所以才想到這種輕小說式（？）的標題。
如果要舉出一個在 JavaScript 裡面很重要也很常用，但新手常常搞混的概念，那「非同步（Asynchronous）」當仁不讓，絕對是第一名。跟其他那些 this、closure、prototype 或是 hoisting 比起來，非同步在實際開發的時候用到的頻率高太多了，而且是初學者常常會踩坑的地方。
非同步真的那麼難嗎？
我相信不是的。只要循著一個正確的脈絡前進，就可以循序漸進理解為什麼需要非同步，也能知道在 JavaScript 裡面是怎麼處理這種操作的。
類似的主題我其實在四年前就寫過，但現在回頭看實在是寫得滿差的，所以四年後重新挑戰這個主題，希望能寫出一篇品質不錯的文章，把非同步這件事情講清楚。
在寫這篇文章之前，參考了 Node.js 的官方文件，發現在非同步的講解上其實做得不錯，因此本文會以類似的切入點開始談這個問題。如果不會 Node.js 也沒關係，我底下會稍微做點介紹。
建議閱讀本文以前需要具備 JavaScript 基礎，知道如何使用 JavaScript 操作 DOM，也知道什麼是 ajax。
接著就讓我們開始吧！
近幾年前端框架大放異彩，許多新手才學沒多久的 JavaScript，就直接學習三大框架了（雖然 React 不是框架，但整個生態系其實就跟框架沒兩樣，因此我覺得歸類在框架也不是不行）。
而這三大框架通常都是拿來寫 SPA（Single Page Application）用的，我一直認為在學習這些框架前應該要具備一些基礎知識，尤其是對於前後端的理解，否則一定會遇到很多不知道從何解起的問題。
因此，本文舉出一個我自己曾經碰過，學生也常常跑來問我的問題當作範例，大家也可以先想一下自己能不能回答出這個問題：
假設今天我有個 SPA，搭配某些 router 的 library 來實作路由，所以
/list會連到列表頁，/about會到關於我的頁面。可是奇怪了，當我把 SPA 上傳到 GitHub Pages 之後，首頁是好的，我從首頁進去
/list也是好的，可是當我在/list重新整理的時候，卻顯示 404 not found，這是為什麼呢？
要回答這個問題，必須先來複習一下前後端相關的網路基礎知識。
前陣子有個學生跑來問我一個問題，說他在寫 React 的時候分不清楚 keyPress 與 keyDown 這兩個事件，還有 keyCode 跟 charCode 這兩個東西，有時候拿得到值，有時候卻拿不到，覺得十分困惑。
我原本以為是 React 做了一些處理，所以去看了一下原始碼。後來發現 React 的確有做一些處理，但實際上這個問題跟 React 沒什麼關係，而是 keyPress 跟 keyDown 這兩個原生的 JavaScript 事件本來就有差異。
所以他碰到的問題跟 React 一點關係都沒有，只是對這部分的事件機制不熟而已。
儘管如此，能夠藉由一個實際的問題來參考一下 React 的實作還是件很不錯的事，而且 React 的註解寫得很好。
因此，這篇會先帶大家來看這兩個事件的不同，最後再來看 React 裡面怎麼做一些處理。
Update your browser to view this website correctly. Update my browser now