1. 前言
1.不廢話,書接上文react-高階組件初識,只講了個開頭
2.接下來繼續(xù)
2.參數(shù)
react-高階組件初識中,高階組件的參數(shù)只是一個組件,但是其實高階組件的參數(shù)還可以接收其他參數(shù),比如 根據(jù)傳遞的參數(shù)來獲取
storage的數(shù)據(jù)
2.1 高階組件代碼
function withUserData(WrappedComponent,key) {
return class extends React.Component {
constructor(props){
super(props)
this.state= { userInfo:{} }
}
componentDidMount() {
//key傳遞過來的
let userInfo = JSON.parse(localStorage.getItem(key))
this.setState({ userInfo })
}
render() {
// ...this.props 傳遞給當(dāng)前組件的屬性繼續(xù)向下傳遞
return <WrappedComponent userInfo={this.state.userInfo} {...this.props} />
}
}
}
1.其實沒有額外變化 只是根據(jù)
key來獲取值
2.這里面為什么以with開頭,其實是受react-router里面的withRouter的影響
2.2 包裹組件也沒變化
class UserView2 extends React.Component {
render() {
let { userInfo } = this.props
return (
<div>
<h1>{userInfo.name}</h1>
<p>{userInfo.description}</p>
</div>
)
}
}
2.3 聯(lián)合高階組件的使用
const UserHOC = withUserData(UserView2,"userInfo")
let App = () => {
return (
<div>
<h1>App</h1>
<UserHOC />
</div>
)
}
就是多加個參數(shù)而已
3. 高階函數(shù)
3.1 基本概念
1.高階函數(shù),返回值是一個高階組件,所以也可以看成是高階組件的變種形式
3.2 整改
既然返回值是高階組件那就好說了
const withUserData = (key)=>(WrappedComponent)=> {
return class extends React.Component {
constructor(props){
super(props)
this.state= { userInfo:{} }
}
componentDidMount() {
//key傳遞過來的
let userInfo = JSON.parse(localStorage.getItem(key))
this.setState({ userInfo })
}
render() {
// ...this.props 傳遞給當(dāng)前組件的屬性繼續(xù)向下傳遞
return <WrappedComponent userInfo={this.state.userInfo} {...this.props} />
}
}
}
3.3 分析
1.高階組件作為返回值就行
2.上面的寫法和下面的寫法等價,箭頭函數(shù)的基礎(chǔ)
const withUserData2 = (key)=>(WrappedComponent)=> class extends React.Component {}
3.4 WrappedComponent
WrappedComponent 這個包裹組件沒有變化
3.5 聯(lián)合使用
const UserHOC = withUserData("userInfo")(UserView2)
let App = () => {
return (
<div>
<h1>App</h1>
<UserHOC />
</div>
)
}
1.這種寫法在 react-redux里面見到的比較多
export default connect(mapStateToProps, mapDispatchToProps)
2.類似這種,其實很多第三方庫都有,只是之前可能不太了解高階組件,高階函數(shù)給忽略掉了
參考資料
react-高階組件初識
react-redux 基礎(chǔ)
react-組件總結(jié)
react-高階組件-中文官網(wǎng)
