iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 23
0
Modern Web

好 Js 不學嗎 !? JavaScript 入門中的入門。系列 第 23

[Day23] React - 複合元件

大綱

  • 擴充 HTML

擴充 HTML
React + JSX 這兩種成為了強大且具表達性的工具,這允許了我們建立使用類似 HTML 的語法呈現的自訂元件。這個模式遠比純 HTML 要強大許多,允許了我們在其生存期間可以控制其行為。哪這些起頭要從 React.createClass 方法開始講起。

React 喜歡組合多於繼承的運作,這個意思就是說合併小型且簡單的元件和資料物件來讓它成為大型以及更加複雜的元件。由於本人使用的後端程式開發是 Ruby on Rails ,因此對於 MVC 及物件導向工具算是一點小熟悉這樣 (心虛 ~),哪我們就會很期待可以使用到 React.extendClass 這個方法。然而,如果我們正在開發一個網頁時,就不會想到要去擴充 HTML DOM 節點 (node),因此 React 的元件也就不用擴充了,反而是我們要想如何去組合它們。

React 擁有組合性的特性,它允許我們混合各個種子元件來成為複雜且功能又很強大的新元件。

透過這幾天關於 React 的介紹,我們約略的知道 React 如何使用組合模式,這允許了我們封裝 HTML 元素或者是自訂元件接著按照自己專案的需求來客製化其行為。當我們將元件組合起來時,這些元件便會變得更明確且在語義上也更一清二楚。


上一篇
[Day22] React - 事件處理
下一篇
[Day24] React - Mixin
系列文
好 Js 不學嗎 !? JavaScript 入門中的入門。30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言