## 前言 ### 定義 > 高階組件就是一個函數，傳給它一個組件，它返回一個新的組件。 ```jsx const NewComponent = higherOrderComponent(OldComponent) ``` ### 設計核心 它的設計思想很像設計模式中的裝飾者模式，為任何需要某些數據或者邏輯代碼的對象提供所需然后返回。有關裝飾者設計模式的解讀歡迎參考我的語雀專輯：[裝飾者模式](https://www.yuque.com/robinson/design-patterns/ygc1bo) ### 解決問題 主要解決數據共享或者代碼邏輯共享，提高代碼可復用性、可維護性。 ## 案例一 ：共享數據 非常常見的是一個系統中已經登錄的用戶，我們是具有一定的用戶信息的，假設我們知道的用戶對象信息是這樣的:`user:{userName:'張三',age:13}`,我們在兩個組件或者說頁面中都需要使用這里的數據，只不過用途不同，可以對比看下我們的寫法區別。 ```jsx class UserInfo extends Component{ constructor(props){ super(props); this.state = { userName:'' } } componentDidMount(){ let user = localStorage.getItem('user') ; if(user){ let userInfo = JSON.parse(user); let {userName} = userInfo this.setState({ userName }) } render(){ let {userName} = this.state ; return (<p>用戶名：{userName}</p>) } } } ``` ```jsx class UserInfoChange extends Component{ constructor(props){ super(props); this.state = { userName:'' } } componentDidMount(){ let user = localStorage.getItem('user') ; if(user){ let userInfo = JSON.parse(user); let {userName} = userInfo this.setState({ userName }) } render(){ let {userName} = this.state ; return (<input name='userName' defaultValue={userName}/>) } } } ``` 優化之后，我們只需要把這部分獲取用戶信息拿出來即可，然后通過屬性傳入需要的這個數據的組件,新建一個withUser.js ```jsx export default (WrappedComponent,name){ class NewComponent extends Component { constructor () { super() ; this.state = { data: null } } componentWillMount () { let data = localStorage.getItem(name) ; this.setState({ data }) } render () { return (<WrappedComponent data={this.state.data}>) } } return NewComponent } ``` 那么我們原來的用戶信息的組件就會變得輕便很多。 ```jsx import withUser from './withUser' class UserInfoWithUser extends Component{ constructor(props){ super(props); this.state = { } } render(){ let {user} = this.props ; return (<p>用戶名：{user.userName}</p>) } } } UserInfoWithUser = withUser(UserInfoWithUser, 'user') export default UserInfoWithUser ``` ## 案例二 ：共享某些業務邏輯 方式也是一樣的，主要是可以將某些組件中可以共用的方法（業務邏輯或者工具方法）提煉到另外的函數中。具體案例略。 ## 多層高階組件 試圖理解下下面的圖示，假如我們的需求是從localStorage中獲取數據后，屬性傳入一個組件， 然后再根據ajax，再屬性傳入一個組件，那么就會形成一個多層的高階組件。  它的具體寫法可能會是這樣的：要格外注意其包裹的順序哦。 ~~~ import wrapWithLoadData from './wrapWithLoadData' import wrapWithAjaxData from './wrapWithAjaxData' class InputWithUserName extends Component { render () { return <input value={this.props.data} /> } } InputWithUserName = wrapWithAjaxData(InputWithUserName) InputWithUserName = wrapWithLoadData(InputWithUserName, 'username') export default InputWithUserName ~~~ ## 參考文檔 - 張容銘《js的設計模式》裝飾者模式 - [高階組件](http://huziketang.mangojuice.top/books/react/lesson28) - [js設計模式語雀專輯](https://www.yuque.com/robinson/design-patterns)