1.基本概念
高階組件是React 中一個(gè)很重要且較復(fù)雜的概念又固，高階組件在很多第三方庫(kù)（如Redux）中都被經(jīng)常使用，即使你開發(fā)的是普通的業(yè)務(wù)項(xiàng)目煤率，用好高階組件也能顯著提高你的代碼質(zhì)量仰冠。高階組件的定義是類比于高階函數(shù)的定義。高階函數(shù)接收函數(shù)作為參數(shù)蝶糯，并且返回值也是一個(gè)函數(shù)洋只。類似的，高階組件接收React組件作為參數(shù)，并且返回一個(gè)新的React組件木张。高階組件本質(zhì)上也是一個(gè)函數(shù)，并不是一個(gè)組件端三，這一點(diǎn)一定要注意
高階組件的主要功能是封裝并分離組件的通用邏輯舷礼，讓通用邏輯在組件間更好地被復(fù)用。
2. 應(yīng)用場(chǎng)景
假設(shè)我有一個(gè)組件郊闯，需要從LocalStorage中獲取數(shù)據(jù)妻献，然后渲染出來。于是我們可以這樣寫組件代碼：
import React, { Component } from 'react'
export default function HOC(WrappedComponent团赁，key) { //key接收到的參數(shù)
return class extends Component {
componentWillMount() {
let data = localStorage.getItem(key);
this.setState({data});
}
render() {
// 通過{...this.props} 把傳遞給當(dāng)前組件的屬性繼續(xù)傳遞給被包裝的組件WrappedComponent
return <WrappedComponent data={this.state.data} {...this.props} />
}
}
}
@HOC //裝飾器引入無參數(shù)方式
class MyComponent2 extends Component {
render() {
return <div>{this.props.data}</div>
}
}
export default HOC(MyComponent2) //不傳參數(shù)
export default HOC(MyComponent2,'name') //參數(shù)傳遞
3.進(jìn)階用法
有其他參數(shù)時(shí)的高級(jí)用法
import React, { Component } from 'react'
export default (key) => (WrapperComponent)=>{ //key接收到的參數(shù)
return class extends Component {
componentWillMount() {
let data = localStorage.getItem(key);
this.setState({data});
}
render() {
// 通過{...this.props} 把傳遞給當(dāng)前組件的屬性繼續(xù)傳遞給被包裝的組件WrappedComponent
return <WrappedComponent data={this.state.data} {...this.props} />
}
}
}
@HOC //裝飾器引入無參數(shù)方式
@HOC('name') //傳遞參數(shù)
class MyComponent2 extends Component {
render() {
return <div>{this.props.data}</div>
}
}
export default HOC()(MyComponent2) //不傳參數(shù)
export default HOC('name')(MyComponent2) //參數(shù)傳遞
react-redux中的connect就是這種用法
connect([mapStateToProps], [mapDispatchToProps], [mergeProps], [options])
4.高階組件與父組件
高階組件是一個(gè)函數(shù)育拨，函數(shù)關(guān)注的是邏輯；父組件是一個(gè)組件欢摄，組件主要關(guān)注的是UI/DOM熬丧。
- 如果邏輯是與DOM直接相關(guān)的，那么這部分邏輯適合放到父組件中實(shí)現(xiàn)怀挠；
- 如果邏輯是與DOM不直接相關(guān)的析蝴，那么這部分邏輯適合使用高階組件抽象，如數(shù)據(jù)校驗(yàn)绿淋、請(qǐng)求發(fā)送等闷畸。
