[[408797]]

本文轉載自微信公眾號「JS每日一題」，作者灰灰 。轉載本文請聯系JS每日一題公眾號。

一、React組件是什么

組件就是把圖形、非圖形的各種邏輯均抽象為一個統一的概念(組件)來實現開發的模式

在React中，一個類、一個函數都可以視為一個組件

在Vue系列中，我們了解到組件所存在的優勢：

• 降低整個系統的耦合度，在保持接口不變的情況下，我們可以替換不同的組件快速完成需求，例如輸入框，可以替換為日歷、時間、范圍等組件作具體的實現
• 調試方便，由于整個系統是通過組件組合起來的，在出現問題的時候，可以用排除法直接移除組件，或者根據報錯的組件快速定位問題，之所以能夠快速定位，是因為每個組件之間低耦合，職責單一，所以邏輯會比分析整個系統要簡單
• 提高可維護性，由于每個組件的職責單一，并且組件在系統中是被復用的，所以對代碼進行優化可獲得系統的整體升級

二、如何構建

在React目前來講，組件的創建主要分成了三種方式：

• 函數式創建
• 通過 React.createClass 方法創建
• 繼承 React.Component 創建

函數式創建

在React Hooks出來之前，函數式組件可以視為無狀態組件，只負責根據傳入的props來展示視圖，不涉及對state狀態的操作

大多數組件可以寫為無狀態組件，通過簡單組合構建其他組件

在React中，通過函數簡單創建組件的示例如下：

function HelloComponent(props, /* context */) { 
  return <div>Hello {props.name}</div> 
} 

通過 React.createClass 方法創建

React.createClass是react剛開始推薦的創建組件的方式，目前這種創建方式已經不怎么用了

像上述通過函數式創建的組件的方式，最終會通過babel轉化成React.createClass這種形式，轉化成如下：

function HelloComponent(props) /* context */{ 
  return React.createElement( 
    "div", 
    null, 
    "Hello ", 
    props.name 
  ); 
} 

由于上述的編寫方式過于冗雜，目前基本上不使用上

繼承 React.Component 創建

同樣在react hooks出來之前，有狀態的組件只能通過繼承React.Component這種形式進行創建

有狀態的組件也就是組件內部存在維護的數據，在類創建的方式中通過this.state進行訪問

當調用this.setState修改組件的狀態時，組件會再次會調用render()方法進行重新渲染

通過繼承React.Component創建一個時鐘示例如下：

class Timer extends React.Component { 
  constructor(props) { 
    super(props); 
    this.state = { seconds: 0 }; 
  } 
 
  tick() { 
    this.setState(state => ({ 
      seconds: state.seconds + 1 
    })); 
  } 
 
  componentDidMount() { 
    this.interval = setInterval(() => this.tick(), 1000); 
  } 
 
  componentWillUnmount() { 
    clearInterval(this.interval); 
  } 
 
  render() { 
    return ( 
      <div> 
        Seconds: {this.state.seconds} 
      </div> 
    ); 
  } 
} 

三、區別

由于React.createClass創建的方式過于冗雜，并不建議使用

而像函數式創建和類組件創建的區別主要在于需要創建的組件是否需要為有狀態組件：

• 對于一些無狀態的組件創建，建議使用函數式創建的方式
• 由于react hooks的出現，函數式組件創建的組件通過使用hooks方法也能使之成為有狀態組件，再加上目前推崇函數式編程，所以這里建議都使用函數式的方式來創建組件

在考慮組件的選擇原則上，能用無狀態組件則用無狀態組件

參考文獻 

https://react.docschina.org/