React Native 從頭學筆記8 — Component (元件)

這是一小段網頁中的內容。
也可以看成這樣。(以 Java 來解釋)
對於 React 來說,也等於上面這樣的表示。
當使用 ES6 的類別來表示時,也等於上面這樣的表示。

在 React 中,一個網頁的 TAG 等於一個 function;用 ES6 class 來表示時,等於一個 "有畫面渲染功能的類別"。

目前在 React 中,要自訂一個 JSX 的 TAG,我們可以用 function 的方式來寫,也可以用 ES6 的 class 來寫。後者看起來程式碼多了點,但是我的建議是後者。

這個建議應該源自於大多數時間以物件導向/面向對象/OO來思考程式的自我習慣,而且我相信和我近似的人比較多。在 OO 的世界裡,function 這個程式結構所對應的是某種行為,以自然語言來說,是動詞。在 JavaScript 的世界中,將 HTML 中的 tag 視為一個物件(Object);對於「某物」,我們很少以「動詞」來形容(不是絕對沒有),所以我的建議是後者:以 ES6 class 的方式來撰寫象徵某個網頁元素/格式的 tag。

理解上述後,我們就可以理解下面的程式碼:

以上,就是 React 世界裡的 Component。

想進一步瞭解,可以參考 React 官網

Show your support

Clapping shows how much you appreciated WuFeng Chiang’s story.