做前端的蝸牛2018-12-23 21:29:55

我是一名前端，用了2年的react，我來回答一下這個問題！

首先，建立React元件有三種方式

：

函式式無狀態元件

採用

React。createClass

（不推薦）

類繼承

React。Component

下面分別說一下三種方式

第一種：

表現形式上只是一個函式，函式引數是傳入的屬性props，沒有生命週期中的各個鉤子函式，也不會被例項化，在函式中不能使用this關鍵字，元件的資料來源於props，沒有自身狀態的元件可以採用這種方式，優點是效能好。

第二種：基本被放棄

第三種：

以es6 class的方式定義，並且繼承自React的Component，生命週期中的各個鉤子函式都掛在了例項上，在整個生命週期中可以透過state 和 props控制組件的狀態，state是控制組件自身的狀態。

高階元件

所謂高階元件其實就是把一個元件傳入一個函式中返回一個新的元件，實現方式：

1、定義一個函式，引數是react元件，返回另外一個元件

2、採用es6的decorator

簡單的說就是再對元件包裝一層，包裝的方式有：

1、把引數當做子元件使用

2、直接把引數當做父類繼承

注：高階元件的作用是複用相同的元件邏輯，所以難點在於如何去抽離這些元件的公共邏輯並且能夠供多人使用，我想應該需要維護一個公共元件庫！

元件的劃分

我們以上面這個頁面為例來說明元件的劃分，這個頁面分為兩大塊，虛線框裡面的是篩選項包括輸入框、選擇項、搜尋按鈕，下方是搜尋結果，那麼你遇到這樣的頁面怎麼去劃分元件呢？

我想有兩種方式：

1、輸入框、選擇項、搜尋按鈕、搜尋結果、列表各是一個元件（通常的思維）

2、整個頁面是一個元件

第一種劃分方式：

功能劃分的細緻，靈活，維護性強，可配置性強，可透過不同的組合渲染出不同的頁面，但是在開發頁面時需要一個個拼接元件，可能還需要開發一些另外的邏輯

第二種方式：

靈活度差，邏輯複雜，維護性差，但是如果你開發的頁面都長得大致如此，那就很適合這麼幹，配合腳手架，出活嗖嗖的

所以元件的劃分還是依賴於業務！

喜歡我的回答就關注我吧，有問題可以發表評論，我們一起學習，共同成長！