高階元件
簡單來說，高階元件可以看做乙個函式，且該函式接受乙個元件作為引數，並返回乙個新的元件。
我在之前的部落格《閉包和類》中提到乙個觀點，物件導向的好處就在於，易於理解，方便維護和復用。
其實高階元件，也是為了更好地復用之前的元件。它可以理解為，基礎元件通過包裹處理，生成乙個適應某些場景的元件。
它可能存在於以下幾種場景：
定製props
乙個簡單例子：
return class extends react.component ;
} }
這是hoc(high order component)最常用的一種方式，用來傳遞一些定製化的引數給內部元件。
提取公共方法、屬性
在to b的專案中，表單是乙個大頭，所有流程都繞不開表單。也就會說到受控元件和非受控元件。
受控元件
由於html表單元素會保留一些內部狀態，比如input框，它會有自己內部的狀態來儲存使用者的輸入值。
class nameinput extends react.component ;
this.handlechange = this.handlechange.bind(this);
} handlechange(event) );
} render()
}
但是，還是有一些元素，不能使用這種方法，比如
這就引出了——
非受控元件
非受控元件從dom中獲取表單值，而不是通過react的state來處理。由於它不經過react的一些邏輯，所以不能對它的狀態做監控。
下面是乙個非受控元件的例子：
import react, from "react";
export default class nameinput extends component
handlechange(event) );
} render()
/>
);}}
和 支援 defaultchecked，和 支援 defaultvalue，可以幫助設定表單預設值。有關ref的使用，參考這個文件 refs & dom 。
我個人建議，如果對於一些資料互動較少，展示和處理基本在元件內部完成，不會涉及到很多元件間資料交換的情景，可以使用非受控元件，更快，更直觀。其他情況仍然建議使用受控元件，方便資料流的傳導。
接著說回高階元件。在使用表單時，很多情境下的輸入，我們都希望統一由state，或者redux來儲存，而不是被dom節點儲存。
上面講到了受控元件的使用，關鍵點有三：
1.對應的onchange方法
2.對應的儲存點，state或者redux
3.繫結到對應元件
參考上面的描述，來實現乙個高階元件的生成函式。
這樣就可以很方便的生成受控元件。
總結
React 高階元件 HOC
來看個例子 import react,from react class page1 extends component render export default page1 這個例子中在元件掛載前需要在localstorage中取出data的值，但當其他元件也需要從localstorage中取出同...
React 高階元件（HOC）
高階元件 highordercomponent 是 react 中用於復用元件邏輯的一種高階技巧。hoc 自身不是 react api 的一部分，它是一種基於 react 的組合特性而形成的設計模式。具體來說，高階元件是乙個函式，能夠接受乙個元件並返回乙個新的元件，通過高階函式可以幫助我們實現某些邏...
React之高階元件
react之高階元件 import react,from react import test1 from test1.js import test2 from test2.js 1 高階元件 是乙個函式，接收乙個引數，引數是乙個元件 2 高階元件的作用 讓外層函式幫助內層元件完成任務，內層元件直接使...