React中的三種類型組件介紹

React從誕生到如今，愈來愈多的前端開發者喜歡上該框架，其緣由有不少，其中一個主要的緣由是由於它的組件很靈活，而本博客主要介紹React的三種類型的組件：受控類型，無狀態類型，高階類型。

在講組件以前，先介紹一下React組件的兩個重要特性：

1. props:組件屬性，專門用來鏈接父子組件間通訊，父組件傳輸父類成員，子組件能夠利用但不能編輯父類成員；

2. state：專門負責保存和改變組件內部的狀態；

如今開始步入主題了

• 受控類型組件：

A）非受控組件
定義：該組件內部的狀態不受state控制；
通常模式：

<component defaultVaule='' />

缺點：組件的變化不容易管理；
demo：

B）受控組件
定義：組件的狀態變化受到state的控制；
模式：

組件的值----state控制；
 組件值得變換---經過觸發onChange事件，而後由this.setState負責改變；

demo：

• 無狀態組件

定義：若一個組件不含有狀態和對狀態的處理，則能夠將render方法單獨抽取出來，成爲一個獨立的組件函數；

特色：
1）不包含任何狀態，但能夠包含屬性；
2）無狀態組件生成時不用實例化；
3）無狀態組件沒有this，ref和生命週期；

做用：
1）單純的UI表現，不用涉及太多的交互；
2）不用對DOM作過多的操做；
demo：

注意：
無狀態組件轉化爲有狀態組件，則經過高階組件轉化；方式就是高階組件經過props傳入state。

demo：

• 高階組件

定義：一個包含了另外一個React組件的React組件；本質上就是一個函數.
形式：

包裝方式：屬性代理和反向代理；
特色：不會改變被包裝組件的內容，結構，不會複製它的行爲，是利用它建立一個新的行爲；

• 屬性代理：

定義：高階組件接受外界實行，而後經過包裝環境傳遞給被包裝組件；
形式：

function HOC(Com) {
  其餘處理；
  return class [Name] extends Component {
     constructor(props) {
       super(props);
     }
     render() {
        return (
          <div>
             <Com {...this.props} />
          </div>
        )
     }
  }
}

Name:能夠指定返回組件的名稱；

• 反向代理

定義：指定的組件做爲另外一個組件的父類，而繼承了的組件就是一個高階組件
特色：
1）該組件是被動被繼承；
2）高階組件能夠經過this來獲取父類的state，props，生命週期函數和渲染函數；
3）通常來講，若調用父類的生命週期和渲染函數，用super來調用，以便保護父類的生命週期和渲染函數；
優點：
渲染劫持：高階組件經過props屬性來決定父類的渲染樹是否被渲染（props不能建立或者改變props的名稱，但能夠更改和操做props的值）；
demo：

function HOC(B){
       return class [A] extends B{
         render(){
             return super.render();
      }
 }