2.2 組件化

長期以來，前端開發者都在探索如何更好地管理項目模塊，都在思考如何設計各模塊中類似的UI及邏輯以達到高效復用的目的。早期我們通過定義通用代碼文件，在項目中通過script標簽引入方式完成復用，這種方式確實能在一定程度上實現通用代碼復用、對應模塊版本管理等需求，但在大型項目中，這種方式會顯得很脆弱，模塊之間的依賴管理能力欠缺。后來，有了Bower、Grunt、Gulp等，解決了模塊文件或依賴間的控制問題。再后來，有了Webpack，有了各種模塊化規范，如AMD、CMD、Commonjs、ES module等，前端開發才進入一個新的世紀。一路進化，最終組件化、MVC、面向對象編程、函數式編程等思想才得以迸發。

2.2.1 初識組件

首先來看一個例子，下圖是京東商城首頁，我們站在開發者的角度來分析一下這個網頁的頁面結構。

在使用Taro開發這個頁面時，首先考慮將頁面內容拆分為圖中標注的6個模塊，設計好模塊間的數據與UI交互之后，便可以單獨開發每個模塊，最終組合各個模塊，完成開發。這里拆解的6個部分，正是6個獨立組件。

2.2.2 組件定義

Taro中的組件分為兩種，一種是基于類創建的組件，被稱為類組件；一種是基于函數創建的組件，被稱為函數組件。

1.類組件

定義類組件是一件很容易的事情，你只需要定義一個類，這個類繼承自Taro.Component，且在組件中定義render方法并返回值即可，代碼示例如下：

當然，還有為了做優化提供的另一種類組件，關于該組件的原理與用法，我們將在實戰優化部分進行詳細介紹，代碼示例如下：

2.函數組件

函數組件相較于類組件，定義更便捷，使用更靈活，尤其搭配Hooks使用能夠在某些場景下替代類組件。函數組件的定義如下：

或者使用箭頭函數，寫法如下：

定義好組件后，最終需要將最上層組件也就是根組件掛載到DOM節點上：

為了方便講解，后續章節將統一使用類組件，當然我們也會在Hooks章節詳細介紹函數組件的知識。

2.2.3 props

很多時候，組件中使用的某些數據可能需要外部提供，就像我們使用HTML中的圖片標簽時，需要設置src屬性才能顯示對應圖片。假如現在定義了一個名叫Timg的類似圖片img的組件，組件內部應該怎樣獲取外部傳入的屬性數據并使用呢？答案是使用props，代碼示例如下：

效果如下圖所示。

通過props，可以將數據傳遞給組件，組件內部通過this.props獲取對應的屬性數據，渲染即可。

有時，某些屬性數據并不一定是外部必須傳入的，因此我們在定義組件時，可以設置默認屬性數據，如上例：

若在使用Timg組件時不傳入src屬性，則Timg組件會使用我們通過defaultProps設置的src屬性的默認數據渲染頁面。反之，Timg組件會使用外部傳入的src屬性數據進行渲染。

2.2.4 state

組件中還有一類數據，它具備以下幾個特征：

· 數據私有，僅供組件內部使用。

· 數據需要根據某些操作發生更改，并觸發視圖更新。

這些特征正是組件狀態state期望具備的，滿足這些特征的數據一般都要考慮放入組件狀態state中。

我們現在想設計一個組件，組件中有一個狀態count，該值每過一秒增加1，并在增加后顯示在頁面中。代碼設計如下：

通過這個示例，我們可以總結出state的用法：

· 類組件中有一個名叫state的預定義屬性，該屬性為對象，對象中記錄了關于該組件的所有狀態。如上例中，狀態count的初始值為1。

· 在需要更改這個狀態時，調用組件的setState方法，這個方法繼承自Taro.Component。

· 在JSX中，通過this.state獲取對應狀態值并使用。

2.2.5 樣式

看了以上與組件相關的例子，對于組件，你是否有種似曾相識的感覺？其實從某種角度來看，組件類似HTML中的標簽，這樣類比后，關于組件的很多問題都能迎刃而解。組件中樣式的使用方法和HTML中一致，也分為兩種：內聯樣式和外部樣式。

1.內聯樣式

組件的內聯樣式通過style屬性指定。與HTML標簽的style屬性不同的是，組件的style屬性接收一個對象：

使用內聯樣式需要注意以下幾點：

· 如果不指定尺寸單位，則會默認解析為px，如前面代碼中的width：100，會被解析為width：'100px'。

· 屬性名改為駝峰式命名，如background-color改為backgroundColor。

2.外部樣式

外部樣式可以使用CSS、Less、Sass等文件定義樣式，然后在對應的模塊文件中引入。我們以Less為例：