摘要：無狀態(tài)組件和有狀態(tài)組件無狀態(tài)組件和有狀態(tài)組件，劃分依據(jù)是根據(jù)組件內(nèi)部是否維護(hù)。展示型組件和容器型組件展示型組件和容器型組件，劃分依據(jù)是根據(jù)組件的職責(zé)。

文：徐超，《React進(jìn)階之路》作者
授權(quán)發(fā)布，轉(zhuǎn)載請注明作者及出處

React 深入系列，深入講解了React中的重點概念、特性和模式等，旨在幫助大家加深對React的理解，以及在項目中更加靈活地使用React。

React 組件有很多種分類方式，常見的分類方式有函數(shù)組件和類組件，無狀態(tài)組件和有狀態(tài)組件，展示型組件和容器型組件。好吧，這又是一篇咬文嚼字的文章。但是，真正把這幾組概念咬清楚、嚼明白后，對于頁面的組件劃分、組件之間的解耦是大有裨益的。

函數(shù)組件(Functional Component )和類組件(Class Component)，劃分依據(jù)是根據(jù)組件的定義方式。函數(shù)組件使用函數(shù)定義組件，類組件使用ES6 class定義組件。下面是函數(shù)組件和類組件的簡單示例：

// 函數(shù)組件
function Welcome(props) {
  return 
Hello, {props.name}
;
}

// 類組件
class Welcome extends React.Component {
  render() {
    return 
Hello, {this.props.name}
;
  }
}

上面的兩種寫法是等價的，但函數(shù)組件的寫法要比類組件簡潔，不過類組件比函數(shù)組件功能更加強(qiáng)大。類組件可以維護(hù)自身的狀態(tài)變量，即組件的state，類組件還有不同的生命周期方法，可以讓開發(fā)者能夠在組件的不同階段（掛載、更新、卸載），對組件做更多的控制。

類組件有這么多優(yōu)點，是不是我們在開發(fā)中應(yīng)該首選使用類組件呢？其實不然。函數(shù)組件更加專注和單一，承擔(dān)的職責(zé)也更加清晰，它只是一個返回React 元素的函數(shù)，只關(guān)注對應(yīng)UI的展現(xiàn)。函數(shù)組件接收外部傳入的props，返回對應(yīng)UI的DOM描述，僅此而已。當(dāng)然，如上面例子所示，使用只包含一個render方法的類組件，可以實現(xiàn)和函數(shù)組件相同的效果。但函數(shù)組件的使用可以從思想上迫使你在設(shè)計組件時多做思考，更加關(guān)注邏輯和顯示的分離，設(shè)計出更加合理的頁面上組件樹的結(jié)構(gòu)。實際操作上，當(dāng)一個組件不需要管理自身狀態(tài)時，可以把它設(shè)計成函數(shù)組件，當(dāng)你有足夠的理由發(fā)現(xiàn)它需要“升級”為類組件時，再把它改造為類組件。因為函數(shù)組件“升級”為類組件是有一定成本的，這樣就會要求你做這個改造前更認(rèn)真地思考其合理性，而不是僅僅為了一時的方便就使用類組件。

無狀態(tài)組件(Stateless Component )和有狀態(tài)組件(Stateful Component)，劃分依據(jù)是根據(jù)組件內(nèi)部是否維護(hù)state。無狀態(tài)組件內(nèi)部不使用state，只根據(jù)外部組件傳入的props返回待渲染的React 元素。有狀態(tài)組件內(nèi)部使用state，維護(hù)自身狀態(tài)的變化，有狀態(tài)組件根據(jù)外部組件傳入的props和自身的state，共同決定最終返回的React 元素。

很容易知道，函數(shù)組件一定是無狀態(tài)組件，類組件則既可以充當(dāng)無狀態(tài)組件，也可以充當(dāng)有狀態(tài)組件。但如上文所述，當(dāng)一個組件不需要管理自身狀態(tài)時，也就是無狀態(tài)組件，應(yīng)該優(yōu)先設(shè)計為函數(shù)組件。

展示型組件(Presentational Component)和容器型組件(Container Component)，劃分依據(jù)是根據(jù)組件的職責(zé)。

展示型組件的職責(zé)是：組件UI長成什么樣。展示型組件不關(guān)心組件使用的數(shù)據(jù)是如何獲取的，以及組件數(shù)據(jù)應(yīng)該如何修改，它只需要知道有了這些數(shù)據(jù)后，組件UI是什么樣子的即可。外部組件通過props傳遞給展示型組件所需的數(shù)據(jù)和修改這些數(shù)據(jù)的回調(diào)函數(shù)，展示型組件只是它們的使用者。展示型組件一般是無狀態(tài)組件，不需要state，因為展示型組件不需要管理數(shù)據(jù)，但當(dāng)展示型組件需要管理自身的UI狀態(tài)時，例如控制組件內(nèi)部彈框的顯示與隱藏，是可以使用state的，這時的state屬于UI state。既然大部分情況下展示型組件不需要state，應(yīng)該優(yōu)先考慮使用函數(shù)組件實現(xiàn)展示型組件。

容器型組件的職責(zé)是：組件數(shù)據(jù)如何工作。容器型組件需要知道如何獲取子組件所需數(shù)據(jù)，以及這些數(shù)據(jù)的處理邏輯，并把數(shù)據(jù)和邏輯通過props提供給子組件使用。容器型組件一般是有狀態(tài)組件，因為它們需要管理頁面所需數(shù)據(jù)。

例如，下面的例子中，UserListContainer是一個容器型組件，它獲取用戶列表數(shù)據(jù)，然后把用戶列表數(shù)據(jù)傳遞給展示型組件UserList，由UserList負(fù)責(zé)UI的展現(xiàn)。

class UserListContainer extends React.Component{
  constructor(props){
    super(props);
    this.state = {
      users: []
    }
  }
  
  componentDidMount() {
    var that = this;
    fetch("/path/to/user-api").then(function(response) {
      response.json().then(function(data) {
        that.setState({users: data})
      });
    });
  }

  render() {
    return (
      
    )
  }
}

function UserList(props) {
  return (
    

      

        {props.users.map(function(user) {
          return (
            

              {user.name}
            
          );
        })}
      
    
  )  
}

展示型組件和容器型組件是可以互相嵌套的，展示型組件的子組件既可以包含展示型組件，也可以包含容器型組件，容器型組件也是如此。例如，當(dāng)一個容器型組件承擔(dān)的數(shù)據(jù)管理工作過于復(fù)雜時，可以在它的子組件中定義新的容器型組件，由新組件分擔(dān)數(shù)據(jù)的管理。展示型組件和容器型組件的劃分完全取決于組件所做的事情。

通過上面的介紹，可以發(fā)現(xiàn)這三組概念有很多重疊部分。這三組概念都體現(xiàn)了關(guān)注點分離的思想：UI展現(xiàn)和數(shù)據(jù)邏輯的分離。函數(shù)組件、無狀態(tài)組件和展示型組件主要關(guān)注UI展現(xiàn)，類組件、有狀態(tài)組件和容器型組件主要關(guān)注數(shù)據(jù)邏輯。但由于它們的劃分依據(jù)不同，它們并非完全等價的概念。它們之間的關(guān)聯(lián)關(guān)系可以歸納為：函數(shù)組件一定是無狀態(tài)組件，展示型組件一般是無狀態(tài)組件；類組件既可以是有狀態(tài)組件，又可以是無狀態(tài)組件，容器型組件一般是有狀態(tài)組件。

React 深入系列3：State 和 Props

新書推薦《React進(jìn)階之路》

作者：徐超

畢業(yè)于浙江大學(xué)，碩士，資深前端工程師，長期就職于能源物聯(lián)網(wǎng)公司遠(yuǎn)景智能。8年軟件開發(fā)經(jīng)驗，熟悉大前端技術(shù)，擁有豐富的Web前端和移動端開發(fā)經(jīng)驗，尤其對React技術(shù)棧和移動Hybrid開發(fā)技術(shù)有深入的理解和實踐經(jīng)驗。

美團(tuán)點評廣告平臺大前端團(tuán)隊招收20192020年前端實習(xí)生

有意者郵件：yao.zhou@meituan.com