react系列（二）高階組件-HOC

高階組件

簡單來講，高階組件能夠看作一個函數，且該函數接受一個組件做爲參數，並返回一個新的組件。

我在以前的博客《閉包和類》中提到一個觀點，面向對象的好處就在於，易於理解，方便維護和複用。
其實高階組件，也是爲了更好地複用以前的組件。它能夠理解爲，基礎組件經過包裹處理，生成一個適應某些場景的組件。
它可能存在於如下幾種場景：

定製props

一個簡單例子：

function withMoreThings(WrappedComponent) {  
  return class extends React.Component {
    render() {     
      const moreThings = {
          more: 'things',
      };
      return <WrappedComponent {...this.props} ...moreThings/>    
    }  
  } 
}

這是HOC(High Order Component)最經常使用的一種方式，用來傳遞一些定製化的參數給內部組件。

提取公共方法、屬性

在to B的項目中，表單是一個大頭，全部流程都繞不開表單。也就會說到受控組件和非受控組件。

受控組件

因爲HTML表單元素會保留一些內部狀態，好比input框，它會有本身內部的狀態來保存用戶的輸入值。

<input type="text" name="name" />

此時，爲了可以處理將React的state和表單元素的內部狀態統一塊兒來，React提供了一種稱爲「受控組件」的技術。

class NameInput extends React.Component {
  constructor(props) {
    super(props);
    this.state = {value: ''};

    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(event) {
    console.log(this);
    this.setState({value: event.target.value});
  }

  render() {
    return (
      <input type="text" value={this.state.value} onChange={this.handleChange} />
    );
  }
}

經過內部的state和綁定change事件，就能夠將input內部的處理機制轉移到React的默認處理機制上，收到React的控制。
可是，仍是有一些元素，不能使用這種方法，好比

<input type="file">

這個元素是隻讀的，用戶選擇完畢後，能夠獲取到對應的文件。不能經過React內部的state來模擬。
這就引出了——

非受控組件

非受控組件從DOM中獲取表單值，而不是經過React的state來處理。因爲它不通過React的一些邏輯，因此不能對它的狀態作監控。這裏有一篇文章Controlled and uncontrolled form inputs in React don't have to be complicated介紹了什麼時候可使用非受控組件。
下面是一個非受控組件的例子：

import React, { Component } from "react";
export default class NameInput extends Component {
  constructor(props) {
    super(props);
  }

  handleChange(event) {
    console.log(this);
    this.setState({ value: event.target.value });
  }

  render() {
    return (
      <input
        type="text"
        defaultValue="test"
        ref={input => (this.input = input)}
      />
    );
  }
}

<input type="checkbox"> 和 <input type="radio"> 支持 defaultChecked，<input type="text"><select> 和 <textarea> 支持 defaultValue，能夠幫助設置表單默認值。

非受控組件經過ref來獲取DOM元素，而後根據當前DOM去更新UI。
有關Ref的使用，參考這個文檔Refs & DOM。
我我的建議，若是對於一些數據交互較少，展現和處理基本在組件內部完成，不會涉及到不少組件間數據交換的情景，可使用非受控組件，更快，更直觀。其餘狀況仍然建議使用受控組件，方便數據流的傳導。

接着說回高階組件。在使用表單時，不少情境下的輸入，咱們都但願統一由state，或者redux來保存，而不是被dom節點存儲。
上面講到了受控組件的使用，關鍵點有三：
1.對應的onChange方法
2.對應的存儲點，state或者redux
3.綁定到對應組件
參考上面的描述，來實現一個高階組件的生成函數。
這裏是一個例子：https://codesandbox.io/s/7p85l213q
這樣就能夠很方便的生成受控組件。
在一些場景下，咱們也能夠用其餘組件包裝WrappedComponent。好比，添加一些小圖標，用父組件可能不夠靈活，用HOC則能夠很輕鬆地生成一個可配置的組件，靈活許多。
在React Higher Order Components in depth還提到一種生成HOC的方法，類繼承，改寫更完全。詳細內容能夠參考這篇文章。也能夠查看知乎的這篇翻譯深刻理解 React 高階組件。

以上，感謝閱讀。