04/30（二）Taiming
===

簡報連結
---
[簡報](https://docs.google.com/presentation/d/1dbInw9iEkVveqummRNT4W2NymhPxJ3HUQSA-RHXSXCA/edit#slide=id.g2cd1654a879_0_221)

目錄
---
[TOC]

### React簡介
元件書本都會做介紹可以在自己看

### 高階元件HOC
函式是一個元件會回傳一個元件，很像python的decorator。

常見的HOC

#### React Memo

#### react-router的withRouter
可以把屬性包起來之後做一點路由的操作

#### react-i18next 的withTranslation()
可以協助做翻譯

HOC可以做很多事情可以做

HOC也能多個組合

有一個通用的功能，這個元件不需要特別的定做

#### 優劣比較
- HOC主要還是重新來重複寫code，來實踐DRY(don't repeat yourself)

- 缺點
prop命名衝突

#### 砍套過多的HOC

- 可讀性下降
- 除錯困難
- 效能影響
- 狀態管理變得複雜
- 增加測試難度
- 單獨使用沒問題，集成處理追問題就很難追
- 解耦合可能會有相依性，不易維護

HOC可以有效解決代碼重複，但不當使用會有更多副作用

### Render Props模式
可以回傳函式

- React Router

- Popover
- 

Render Props主要是props可以重用，除了接收之外也可以拿來重用。

### 不同元件想要反應相同的狀態。
為了讓輸入元件可以共享狀態，必須把狀態向上移動到共同的祖先。
這就是提升狀態(lifting state up )
在小型的應用程序中，我們可以避免使用Redux來做同步，可以用這個方式把狀態提升到共同的父元件

書上舉了溫度轉換的例子。
但下面這樣寫可能會影響到其他元件

所以改到下面這種寫法就不會相互影響

常見的render props

寫動畫的方式

react apollo

#### 優劣比較
- 優點
可以在不同的元件分享屬性跟邏輯，也可以避免HOC的naming collisions

- 缺點
已經被hook大量取代，但因為他沒辦法使用生命週期取代的方法，就越少用

#### Hooks
Hook 是16.8的新功能，不用寫class就能用state等react功能
hooks不是設計模式，但可以被hooks來取代。

不用寫class component就能達到下列目標
- state hook
提供了useState 可以解構目前狀態跟改變目前狀態的方法
後來只要用簡單的程式就可以管理狀態

- effect hook

useeffect可以在元件中產生副作用(附加行為附加效果)
原本的效果是元件渲染內容，其他的操作就是那些副作用，監聽事件，資料擷取，操作dom都可以叫做副作用


- custom hook
也可以操作自己定義的hook。

- 共享邏輯
邏輯重複可以抽取出來來重複運用
- 提高可讀性
功能獨立抽取出來可以讓元件功能單一簡潔，
- 邏輯單元測試
元件簡潔，單元測試也可以更輕鬆容易

usePagination

useDebounce
可以短時間內調用多次可以減少太多次的操作

優點
更少的code
簡化複雜元件
重用共有邏輯
共享非視覺邏輯

缺點
須又常常練習才能正確使用hook
也要注意錯誤的用法，避免導致更大的問題

#### Contianer/ Presentational Pattern

一種關注點分離的設計模式，主要是把試圖跟邏輯獨立開來

contianer負責邏輯狀態管利根資料曾交互
presentation負責展示UI

#### 優劣比較
- 優點
可以關注點容易分離，狀態資料容易分離
展示元件可以做重複性使用
展示元件不會改變應用程式邏輯
改畫面的人就不擔心改到邏輯

- 缺點
這模式好用但hook可以完全取代這事情
儘管我們可以用這個模式，在規模小的code容易看起來大才小用導致code太複雜

### Compound Pattern
兩個以上的componenet結合成一個特定功能來達到目的，其中一個component單獨使用時是沒有意義的
- 像是select跟option

#### 適合時機
有依賴狀態或是相依的狀況

- Antd的List
- Menu
- Menu.Item
- Menu.SubMenu

#### 實作
通常會有一個parenet可以利用child來實作

#### 優劣比較
- 優點
這個元件可以自己做狀態管理，也可以狀態在子元件中共享，不用個別的子元件匯出才能使用

- 缺點
時做元件的時候只有直接的child可以拿到props
有用cloneElement的時候，當props名稱有衝突可能會被覆蓋掉

### Performance相關

#### Static Import
一個靜態導入的過程

套件大小影響載入時間
具體載入時間取決於裝置性能跟網路狀況
要縮小載入時間要盡量縮小bundle size

#### Dynamic import
當元件有多個component，只import一開始需要載入的
若不是法上直接可見的，不點擊那些元件產生的情景就不會載入，甚至根本不會載入

這樣較小的初始包可以變得更快，用戶不必長時間盯著空白的加載時間

#### type
- import on iteraction
- import on Visibility

### code splitting
code越來越複雜跟龐大，若每次都要載入複雜程式都可能會有使用者不佳的問題。
所以分割跟打包最佳化會是一個好方法

- bundle splitting
bundle是把多個檔案js css 圖片 把檔案變成單一檔案，
但隨著程式成長，bundle也會變得更大，頻繁修改的是我們的業務邏輯，讓第三方套件比較不會變動的切開或是切成更多快更有利平行載入。

拆分有機會減少加載速度

- Route-based splitting
特定資源可能僅有特定頁面或路由需要，就不要馬上載入進來。
使用lazy或suspense可以達成上述效果

### PRPL pattern
核心理念可以加快網頁性能，
Push
請求之前修推送資源到客戶端
Render
用戶們盡快看到渲染出來的內容
Pre-cache
預存用戶可能訪問的路由，將其做緩存
Lazy-load
將不是初始頁面的資源進行延遲加載，需要的時候再拿術就好

https://www.tenlong.com.tw/products/9786263332218?list_name=srh

https://www.tenlong.com.tw/products/9789864349609?list_name=srh

### 虛擬化

- 列表虛擬化
列表虛擬化有利提高大型資料列表的渲染效果，只要渲染自己看到的地方就好。


#### 優劣比較
- 優點
操作避免卡頓
- 缺點
滾動太快的時候看不到內容
需要複雜的計算，需要花心思在可是範圍高度跟每一列的高度計算

- Grid虛擬化
使用react window

### 小節
今天分享的部分有機會可以嘗試看看

#### 書籍參考

講得比較好的hook跟觀念，可以參考React 思維進化
- [React 思維進化：一次打破常見的觀念誤解，躍升專業前端開發者（iThome鐵人賽系列書）【軟精裝】
](https://www.tenlong.com.tw/products/9786263336841)
- [從 Hooks 開始，讓你的網頁 React 起來 (第二版)（iT邦幫忙鐵人賽系列書）
](https://www.tenlong.com.tw/products/9786263332874?list_name=srh)
- [今晚來點 Web 前端效能優化大補帖：一次搞定指標 × 工具 × 技巧，打造超高速網站（iThome鐵人賽系列書）](https://www.tenlong.com.tw/products/9786263332218?list_name=srh)
- [打造高速網站從網站指標開始：全方位提升使用者體驗與流量的關鍵
](https://www.tenlong.com.tw/products/9789864349609?list_name=srh)