前端癢癢 der

前言

data fetching 在 React 裡一直是我感到不太自在的一塊，主要是來自於我學藝不精，我知道 React 已經有部分的 pattern 在處理這一塊了，目前最常用到的就是 Redux + Redux middlewares（Redux thunk、Redux saga 等等），前陣子則是開始試著用 custom hook 來處理這塊，感覺很不賴，但比如 cache 等等的事情依然麻煩，所以我在尋找有沒有更好的作法。

最近看到了 React Query，使用起來覺得很讚讚，文件說明清楚、API 少少的很簡單，很符合我心目中好用的 data fetching hook，不過目前也沒有用很深，更多的坑或是應用場景還沒有遇到，所以使用心得可能還要再一陣子才會有，這篇的目的就是做做筆記，提供日後的自己回顧。

🤞前言

目前 Framework 都使用模組化方式撰寫的關係，通常都會 import 各種 library、component，不過通常會遇到兩個煩惱，第一個是 import 沒用到的內容，把沒用到的東西 import 進來除了擾亂閱讀以外，還會跳出很煩的黃字警告（最討厭的是這個），第二個是 import 的排版，一般來說為了可讀性，在排版上會有一些順序的規則，通常順序規則會是： 「library ➡️ 你的 component ➡️ 根據路徑的長短排版」，比如像這樣：

import React from 'react';
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import './App.css';
import Chat from './components/ChatPage';
import Join from './components/JoinPage';
import Playground from './components/Playground';

前言

這篇心得預計不會有什麼價值，就是想發廢文，讚讚。

Back Forward Cache

部分瀏覽器（主要是 Safari、Firefox）為了在往返上下一頁有更好的效能，會使用 BFCache 的策略，會把離開前的 DOM 狀態、JavaScript 狀態都保存住。

當用戶回到上一頁或是進入下一頁時，就會使用記憶體內的 Cache，一切都會像離開前的模樣，好處是可以優化操作體驗，因為都從 Cache 拿，不需要重新 reload 頁面，操作起來就會很迅速，也不需要再藉由網路讀取資料，保留狀態也符合大部分情境的使用者預期，可以回上頁後繼續剛才未完成的操作。

聽起來很美好，但有些情況就不一定，舉個最近遇到的例子。

前言

這章節主要在講述 React Performance 的優化。

前言

這部分就是我學習 「The Complete Junior to Senior Web Developer Roadmap」這堂 Udemy 線上課程的筆記，這篇是有關 SSH 的內容。

前言

介紹完上次的 JavaScript 宇宙觀後，今天要來談談變數與值。

前言

Dan Abramov 的 Just JavaScript 是他最近在進行的 side project，內容主要探討 JavaScript 的運作原理，目前只有類似大綱的內容，會不定期的寄給有報名的人 email。

關於這系列文的走向，主要會是我對內容的解讀和心得，文風可能生硬，也可能垃圾話很多，寫起來也會蠻隨便的，想到的話就會回頭把內容修的更易讀，不確定，總之先寫再說。

背景介紹

安安，我 ChihYang 啦。

放一些之前的筆記還有這陣子的複習，內容比較隨意。