React 深入系列2：組件分類

fizz 發布于2019-08-22 17:26 / 2781人閱讀

摘要：無狀態組件和有狀態組件無狀態組件和有狀態組件，劃分依據是根據組件內部是否維護。展示型組件和容器型組件展示型組件和容器型組件，劃分依據是根據組件的職責。

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

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

函數組件和類組件

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

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

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

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

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

無狀態組件和有狀態組件

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

很容易知道，函數組件一定是無狀態組件，類組件則既可以充當無狀態組件，也可以充當有狀態組件。但如上文所述，當一個組件不需要管理自身狀態時，也就是無狀態組件，應該優先設計為函數組件。

展示型組件和容器型組件

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

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

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

例如，下面的例子中，UserListContainer是一個容器型組件，它獲取用戶列表數據，然后把用戶列表數據傳遞給展示型組件UserList，由UserList負責UI的展現。

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}
            
          );
        })}
      
    
  )  
}

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

總結

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

下篇預告：

React 深入系列3：State 和 Props

我的新書《React進階之路》已上市，請大家多多支持！
鏈接：京東當當

云服務器 GPU云服務器深入理解系列 javascript深入系列 ecs系列2 react

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/95171.html

React 深入系列２：組件分類

摘要：無狀態組件和有狀態組件無狀態組件和有狀態組件，劃分依據是根據組件內部是否維護。展示型組件和容器型組件展示型組件和容器型組件，劃分依據是根據組件的職責。文：徐超，《React進階之路》作者授權發布，轉載請注明作者及出處 React 深入系列2：組件分類 React 深入系列，深入講解了React中的重點概念、特性和模式等，旨在幫助大家加深對React的理解，以及在項目中更加靈活地使...

Karrdy 2019-08-22 16:05 評論0 收藏0
前端文檔收集

摘要：系列種優化頁面加載速度的方法隨筆分類中個最重要的技術點常用整理網頁性能管理詳解離線緩存簡介系列編寫高性能有趣的原生數組函數數據訪問性能優化方案實現的大排序算法一怪對象常用方法函數收集數組的操作面向對象和原型繼承中關鍵詞的優雅解釋淺談系列 H5系列 10種優化頁面加載速度的方法隨筆分類 - HTML5 HTML5中40個最重要的技術點常用meta整理網頁性能管理詳解 HTML5 ...

jsbintask 2019-08-21 12:05 評論0 收藏0
前端文檔收集

摘要：系列種優化頁面加載速度的方法隨筆分類中個最重要的技術點常用整理網頁性能管理詳解離線緩存簡介系列編寫高性能有趣的原生數組函數數據訪問性能優化方案實現的大排序算法一怪對象常用方法函數收集數組的操作面向對象和原型繼承中關鍵詞的優雅解釋淺談系列 H5系列 10種優化頁面加載速度的方法隨筆分類 - HTML5 HTML5中40個最重要的技術點常用meta整理網頁性能管理詳解 HTML5 ...

muddyway 2019-08-29 13:21 評論0 收藏0
React 深入系列7：React 常用模式

摘要：本篇是深入系列的最后一篇，將介紹開發應用時，經常用到的模式，這些模式并非都有官方名稱，所以有些模式的命名并不一定準確，請讀者主要關注模式的內容。 React 深入系列，深入講解了React中的重點概念、特性和模式等，旨在幫助大家加深對React的理解，以及在項目中更加靈活地使用React。本篇是React深入系列的最后一篇，將介紹開發React應用時，經常用到的模式，這些模式并非都有...

Chao 2019-08-22 17:28 評論0 收藏0