1. 前言
1.不廢話,書接上文react-高階組件參數(shù),只講了,高階組件實(shí)現(xiàn)方式的一種屬性代理
2.接下來講 反向繼承
2. 反向繼承
1.通過創(chuàng)建新組件繼承自原始組件, 把原始組件作為父組件
2.功能: 可實(shí)現(xiàn)對原始組件的state狀態(tài)數(shù)據(jù)更新 和 組件模板更新
3. 先來個(gè)簡單的繼承 熱身下
1.比如基于請求攔截,響應(yīng)攔截的一些想法
2.搞個(gè) Loading 和關(guān)閉Loading
3.baseURL
3.1 簡要代碼
class Loading extends React.Component {
constructor(props) {
super(props)
this.state = {
baseURL: "http://yzs.com",
baseImgURL: "http://yzs.com/img"
}
}
show() {
console.log("loading")
}
hide(){
console.log("加載完畢")
}
}
1.一般腳手架項(xiàng)目也都是繼承自
Component或者pureComponent
2.所以在根組件繼承 下面的組件都具備這個(gè)功能了
3.這也是JS推出 class extends 代替原型鏈的,比如 vue中就是常用原型上掛axios,扯遠(yuǎn)了 O(∩_∩)O哈哈~
3.2 使用
class Btn extends Loading{
render() {
return(
<div>
<button onClick={this.show}> show </button>
<button onClick={this.hide}> hide</button>
<h1>{this.state.baseURL}</h1>
</div>
)
}
}
let App = ()=>{
return(
<div>
<h1>App</h1>
<Btn/>
</div>
)
}
ReactDOM.render(<App/>,app)
子組件肯定也繼承了父組件的
state,鉤子
4. 高階組件的反向繼承
4.1 子組件
繼承嘛 所以先準(zhǔn)備個(gè)
ChildComponent組件 ,用來繼承
class ChildComponent extends React.Component {
constructor(props) {
super(props)
this.state = { count: 99999 }
}
componentDidMount() {
console.log("演示 反向繼承 子組件 mount");
}
// 點(diǎn)擊事件
clickComponent() {
console.log("組件被點(diǎn)了");
}
render() {
return (
<div>{this.state.count}</div>
)
}
}
1.簡單的state 用來傳遞到子組件
2.簡單的事件,子組件可以調(diào)用
3.簡單的布局,展示數(shù)據(jù)
4.2 高階組件
const ReverHOC = WrapComponent => {
return class extends WrapComponent {
constructor(props) {
super(props)
this.state = { count: 1000 }
}
componentDidMount() {
// 反向繼承后,可以拿到原始組件的props和state數(shù)據(jù)
console.log("高階組件", this.props, this.state)
console.log("高階組件 did mount")
this.clickComponent()
}
render() {
return (
// 反向繼承時(shí), MyCom是父組件, 不能在子組件模板中使用父組件標(biāo)簽
// return <MyCom/>
// 使用 super.render() 渲染父組件模板
<div>
<h1 onClick={this.clickComponent}>高階組件</h1>
<div>{super.render()}</div>
</div>
)
}
}
}
1.高階組件有自己的 state
2.反向繼承,也可以獲取原始組件的 props state
3.componentDidMount簡單調(diào)用下,證明可以訪問父組件的函數(shù)
4.布局里面加入點(diǎn)擊事件
5.父組件標(biāo)簽不能在組件使用,所以需要通過來渲染模板
{super.render()}
4.3 高階組件聯(lián)合使用
const HOCView = ReverHOC(ChildComponent)
let App = () => {
return (
<div>
<h1>App</h1>
<ChildComponent />
<HOCView />
</div>
)
}
1.直接使用就行
2.查看效果,點(diǎn)擊測試
5. 高階組件的實(shí)現(xiàn)方式
- 屬性代理: 通過創(chuàng)建新組件來包裹原始組件, 把原始組件作為新組件的子組件渲染
功能: 可實(shí)現(xiàn)對原始組件的 props數(shù)據(jù)更新 和 組件模板更新- 反向繼承: 通過創(chuàng)建新組件繼承自原始組件, 把原始組件作為父組件
功能: 可實(shí)現(xiàn)對原始組件的state狀態(tài)數(shù)據(jù)更新 和 組件模板更新
6. 渲染劫持
通過高階組件把原始組件的模板進(jìn)行修改和替換
- 渲染劫持指對一個(gè)組件渲染內(nèi)容的裝飾或修改, 一般通過高階組件來實(shí)現(xiàn), 把一個(gè)組件傳入高階組件,
可以對這個(gè)組件的模板進(jìn)行修改后執(zhí)行渲染, 也可以阻止組件渲染,并修改組件中的數(shù)據(jù)和邏輯
2.渲染劫持的應(yīng)用: 一般用于一些需要登錄狀態(tài)的頁面, 在路由請求渲染頁面(如訂單頁)之前,
使用高階組件判斷是否已登錄,如果已登錄,返回訂單頁模板, 如果沒有登錄,返回空,并跳轉(zhuǎn)到登錄頁
3.后續(xù)有空在補(bǔ)充
參考資料
react-高階組件參數(shù)
react-高階組件初識
react-redux 基礎(chǔ)
react-組件總結(jié)
react-高階組件-中文官網(wǎng)
