Justnote

在 React 中，如果要透過 useRef() 取得 component 內的 element，並操作它執行一些行為，如 focus、activate 等，就會需要特殊的處理

到目前為止已經介紹過不少 React Hooks，這章節將進一步這些 hooks 在使用上的限制

在開發中，時常會遇到一個問題是，因為 component 層層區分，當有一個子元件要傳資料給另外一條支線的子元件時，如果透過 props 傳遞就會變得相當麻煩，中間不需要得到這些資訊的 component 也需要幫忙傳遞，就像是如果今天要送一個禮物給堂弟，我不能直接拿給他，只能先傳給父親，再傳給爺爺，接這再傳給堂弟的父親，最後才會交到他的手上，在 Vue 中，可以透過 provide/inject & Vuex 來解決這些問題，React 中提供了一些方法稱為 - Context API

隨著開發的功能和複雜度的逐漸提升，一個功能可能會由多組 State 來控制操作狀態，但因為 State 的更新機制，在某些情況下可能造成維護不易或預料之外的 Bug，所以 React 提供了另一個 Hook - useReducer() 來解決這種情況下的問題

在 React component 中，如果有 State 被更新，component function 會再次被呼叫，並交叉比對原 DOM 物件與新的 DOM 物件之間的差異進行重新渲染，以回應使用者的操作行為，但在某些情況如 HTTP Request，React 其實並不在意這些非同步行為，因此可能為導致資料更新上的 Bug 或 Infinite loop 的情況發生，接下來將介紹一些 React 中的 hooks 來解決這些問題。