[React]Functional Component 製作上下層共用元件方法

 

源自：【學習筆記】React 边做边学（从零开始，包含Hooks）【25, 26. 彈出組件】一節。

課程中使用 Class 元件設計，CodeSandbox Demo1

看著 Panel 開開關關，心想使用 Functional 元件重新設計應該不是件難事，沒想到在做完之後跳出錯誤訊息：

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: null.

為什麼會得到這樣的錯誤訊息？【Class Instance】

訊息內大致上是說：在應該有值、元件的位置卻得到 null。原因是 ES6 在建立 Class 時會帶有 Instance，典型語法就是【this】應用，this 在 Functional 元件是不受支援的。

題外話，Classes 在 MDN 中對物件導向迷思的解釋：

ECMAScript 6 中引入了類別 (class) 作為 JavaScript 現有原型程式(prototype-based)繼承的語法糖。類別語法並不是要引入新的物件導向繼承模型到 JavaScript 中，而是提供一個更簡潔的語法來建立物件和處理繼承。

實在是看不出 React 中用 Classes 來寫有簡潔的趨勢，不知你是否也和我有一樣想法？

【學習筆記】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，達成程式碼重用的目標。