【學習筆記】React 边做边学（从零开始，包含Hooks）

重温 REACT Functional Component，本篇沒有完整結構，純筆記用途。

課程使用套件

• BULMA 樣式元件
• React Transition Group 動畫元件庫

 

容器排版

課程的主畫面排版由小到大依序由綠、黃、橙、紅高亮，配置如下：

綠色：Product 元件，在 Products 下，顯示產品圖片、金額和加入購物車等功能。

黃色：同位階有 ToolBar 和 Products 元件，在 ProductList 下，分別處理產品搜尋和產品清單的顯示。

橙色：同位階有 Header 和 ProductList 元件，在 APP 下，分別處理產品搜尋和產品清單的顯示。

紅色：APP，最大容器，主畫面是也！

My JSON Server -- 偽線上 REST 服務

開發 JavaScript 前端程式時，為了架設方便性，會使用類似 CodeSandbox 的前端線上程式編輯器進行測試，開發速度很快，對學習有加乘效果。

缺點就是在需要和後端 API 進行連結測試時，內部的 Web Server 往往還沒有在網際網路上公開，當然也就無法完整測試前端效果。這時就可以使用【My JSON Server】來模擬後端應用。

Delphi 10.4.1 對 DataSnap 相關修正一覽

Delphi 10.4.1 人品大爆發，大幅修正許多陳年臭蟲，讓人驚豔！以下是從官方網上文件節錄我覺得很有意思的修正項目。

Delphi JSON Objects framework 處理效率

 

最近在李維老師的部落格看到關於 JSON 的新文章【RAD Studio的JSON處理效率】，主要在描述 TJSONReader 和 TJSONWriter 物件經過重新設計後所推出的 10.4.1，其效率提升的幅度。

對於專門寫中間層服務的我來說，JSON 也是門必須的功課（另一門是 XML for ClientDataSet），從李老師的文章可以得知使用的框架是【Readers and Writers JSON Framework】，在這邊引用官方新版文件內容：

Code Insight Between Delphi 10.4.1 and Cnpack

 

Delphi 10.4.1 的【程式碼提示功能】進行很大的改良，除了功能演算法最佳化外，對我們有什麼影響呢？

理解 React useEffect 02

前情提要

在【理解 React useEffect 01】一文了解到 useEffect 的功能是：

useEffect 主要在呈現 (Render) 後觸發此 Hook 事件，並將取得的資料後再呈現到元件上。

也知道我們要怎麼在 useEffect 裡面拉 WebAPI 的資料；且已知 useEffect 再觸發的條件是：第二個參數【依賴 dependency】發生變化時，就會再觸發 useEffect 掛勾。

這一篇將會告訴各位，如何手動觸發 useEffect，達成程式碼重用的目標。

理解 React useEffect 01

React 中，取得資料並呈現到畫面上一直是個難題，useEffect 就是讓元件呈現【副作用 (Side Effects) 效果】一樣，對我們造成了很大的【副作用】的【效果】。

useEffect 要解決什麼樣的問題？

useEffect 主要在呈現 (Render) 後觸發此 Hook 事件，並將取得的資料後再呈現到元件上。

在【How to fetch data with React Hook?】一文中卻提到：

Note: In the future, React Hooks are not be intended for data fetching in React. Instead, a feature called Suspense will be in charge for it.

這句話中文大概的意思是：

未來 React Hooks 不會用在資料取得的場合，會改由 Suspense 取代。

可是 Suspense 也說明它不會取代 fetch、axios 等取得資料的 API，在目前有限的資料只知道未來還會變化，所以現階段學習 useEffect 是必須的，待情勢明朗後再來調整也來得及。