React構建元件的方式

喆星高照發表於2021-07-26
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方法也能使之成為有狀態元件，再加上目前推崇函數語言程式設計，所以這裡建議都使用函式式的方式來建立元件

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

相關文章