1.什么是高階組件?
官方的定義：高階組件是參數(shù)為組件反症，返回值為新組件的函數(shù)；
高階函數(shù)的維基百科定義：至少滿足以下條件之一：
- 接受一個(gè)或多個(gè)函數(shù)作為輸入围俘；
- 輸出一個(gè)函數(shù)羹呵；
- avaScript中比較常見的filter壁晒、map瓷们、reduce都是高階函數(shù)。
2. 高階組件的調(diào)用過程類似于這樣：
const EnhancedComponent = higherOrderComponent(WrappedComponent);
3.高階函數(shù)的編寫過程類似于這樣：
function higherOrderComponent(WrappedComponent) {
class NewCompoment extends PureComponent{
render () {
return <WrappedComponent/>
}
}
NewCompoment.displayName = "CoderHzc"
}
3.1 組件的名稱問題：
-- 在ES6中秒咐，類表達(dá)式中類名是可以省略的谬晕；
-- 組件的名稱都可以通過displayName來修改；
3.2 高階組件并不是React API的一部分携取，它是基于React的 組合特性而形成的設(shè)計(jì)模式固蚤；
3.3 高階組件在一些React第三方庫(kù)中非常常見：
4. 具體代碼如下:
import React, { PureComponent } from 'react'
// 0.
class App extends PureComponent {
render() {
return (
<div>
App
</div>
)
}
}
// 修改App名字問題
App.displayName = "CoderHzc"
// 1.定義一個(gè)高階組件
function enhanceComponent(WrappedComponent) {
return class NewComponent extends PureComponent {
render() {
return <WrappedComponent {...this.props}/>
}
}
}
// 2.
const EnhanceComponent = enhanceComponent(App)
// 3.
export default EnhanceComponent
5.高階組件應(yīng)用-增強(qiáng)props具體代碼如下:
- 引入createContext
import React, { PureComponent, createContext } from 'react';- 創(chuàng)建Context
// 創(chuàng)建Context
const UserContext = createContext({
nickname: "默認(rèn)",
level: -1,
區(qū)域: "中國(guó)"
});
3.使用UserContext中有個(gè)Provider屬性包裹組件
<UserContext.Provider value={{nickname: "why", level: 90, region: "中國(guó)"}}>
<Home/>
<About/>
</UserContext.Provider>
import React, { PureComponent, createContext } from 'react';
// 創(chuàng)建Context
const UserContext = createContext({
nickname: "默認(rèn)",
level: -1,
區(qū)域: "中國(guó)"
});
class Home extends PureComponent {
render() {
return (
<UserContext.Consumer>
{
user => {
return <h2>Home: {`昵稱: ${user.nickname} 等級(jí): ${user.level} 區(qū)域: ${user.region}`}</h2>
}
}
</UserContext.Consumer>
)
}
}
class About extends PureComponent {
render() {
return (
<UserContext.Consumer>
{
user => {
return <h2>About: {`昵稱: ${user.nickname} 等級(jí): ${user.level} 區(qū)域: ${user.region}`}</h2>
}
}
</UserContext.Consumer>
)
}
}
class App extends PureComponent {
render() {
return (
<div>
App
<UserContext.Provider value={{nickname: "why", level: 90, region: "中國(guó)"}}>
<Home/>
<About/>
</UserContext.Provider>
</div>
)
}
}
export default App;
