[[408797]]

本文轉(zhuǎn)載自微信公眾號(hào)「JS每日一題」，作者灰灰 。轉(zhuǎn)載本文請(qǐng)聯(lián)系JS每日一題公眾號(hào)。

一、React組件是什么

組件就是把圖形、非圖形的各種邏輯均抽象為一個(gè)統(tǒng)一的概念(組件)來(lái)實(shí)現(xiàn)開(kāi)發(fā)的模式

在React中，一個(gè)類(lèi)、一個(gè)函數(shù)都可以視為一個(gè)組件

在Vue系列中，我們了解到組件所存在的優(yōu)勢(shì)：

• 降低整個(gè)系統(tǒng)的耦合度，在保持接口不變的情況下，我們可以替換不同的組件快速完成需求，例如輸入框，可以替換為日歷、時(shí)間、范圍等組件作具體的實(shí)現(xiàn)
• 調(diào)試方便，由于整個(gè)系統(tǒng)是通過(guò)組件組合起來(lái)的，在出現(xiàn)問(wèn)題的時(shí)候，可以用排除法直接移除組件，或者根據(jù)報(bào)錯(cuò)的組件快速定位問(wèn)題，之所以能夠快速定位，是因?yàn)槊總€(gè)組件之間低耦合，職責(zé)單一，所以邏輯會(huì)比分析整個(gè)系統(tǒng)要簡(jiǎn)單
• 提高可維護(hù)性，由于每個(gè)組件的職責(zé)單一，并且組件在系統(tǒng)中是被復(fù)用的，所以對(duì)代碼進(jìn)行優(yōu)化可獲得系統(tǒng)的整體升級(jí)

二、如何構(gòu)建

在React目前來(lái)講，組件的創(chuàng)建主要分成了三種方式：

• 函數(shù)式創(chuàng)建
• 通過(guò) React.createClass 方法創(chuàng)建
• 繼承 React.Component 創(chuàng)建

函數(shù)式創(chuàng)建

在React Hooks出來(lái)之前，函數(shù)式組件可以視為無(wú)狀態(tài)組件，只負(fù)責(zé)根據(jù)傳入的props來(lái)展示視圖，不涉及對(duì)state狀態(tài)的操作

大多數(shù)組件可以寫(xiě)為無(wú)狀態(tài)組件，通過(guò)簡(jiǎn)單組合構(gòu)建其他組件

在React中，通過(guò)函數(shù)簡(jiǎn)單創(chuàng)建組件的示例如下：

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

通過(guò) React.createClass 方法創(chuàng)建

React.createClass是react剛開(kāi)始推薦的創(chuàng)建組件的方式，目前這種創(chuàng)建方式已經(jīng)不怎么用了

像上述通過(guò)函數(shù)式創(chuàng)建的組件的方式，最終會(huì)通過(guò)babel轉(zhuǎn)化成React.createClass這種形式，轉(zhuǎn)化成如下：

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

由于上述的編寫(xiě)方式過(guò)于冗雜，目前基本上不使用上

繼承 React.Component 創(chuàng)建

同樣在react hooks出來(lái)之前，有狀態(tài)的組件只能通過(guò)繼承React.Component這種形式進(jìn)行創(chuàng)建

有狀態(tài)的組件也就是組件內(nèi)部存在維護(hù)的數(shù)據(jù)，在類(lèi)創(chuàng)建的方式中通過(guò)this.state進(jìn)行訪問(wèn)

當(dāng)調(diào)用this.setState修改組件的狀態(tài)時(shí)，組件會(huì)再次會(huì)調(diào)用render()方法進(jìn)行重新渲染

通過(guò)繼承React.Component創(chuàng)建一個(gè)時(shí)鐘示例如下：

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

三、區(qū)別

由于React.createClass創(chuàng)建的方式過(guò)于冗雜，并不建議使用

而像函數(shù)式創(chuàng)建和類(lèi)組件創(chuàng)建的區(qū)別主要在于需要?jiǎng)?chuàng)建的組件是否需要為有狀態(tài)組件：

• 對(duì)于一些無(wú)狀態(tài)的組件創(chuàng)建，建議使用函數(shù)式創(chuàng)建的方式
• 由于react hooks的出現(xiàn)，函數(shù)式組件創(chuàng)建的組件通過(guò)使用hooks方法也能使之成為有狀態(tài)組件，再加上目前推崇函數(shù)式編程，所以這里建議都使用函數(shù)式的方式來(lái)創(chuàng)建組件

在考慮組件的選擇原則上，能用無(wú)狀態(tài)組件則用無(wú)狀態(tài)組件

參考文獻(xiàn) 

https://react.docschina.org/