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的一些邏輯，所以不能對它的狀態做監控。這裡有一篇文章ofollow,noindex" target="_blank">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 高階元件 。
以上，感謝閱讀。