1. 認(rèn)識高階函數(shù)
-
什么是高階組件呢?
認(rèn)識高階函數(shù).png - 高階函數(shù): 接收一個或多個函數(shù)作為輸入, 輸出一個函數(shù).
- 高階組件: Higher-Order Components, 簡稱HOC
- 官方定義: 高階組件是參數(shù)為組件, 返回值為新組件的函數(shù).
2. 高階組件的定義
- 高階組件的調(diào)用過程類似于這樣:
const EnhancedComponent = higherOrderComponent(WrappedComponent);
- 定義一個高階組件
function enhanceComponent(WrappedComponent) {
return class NewComponent extends PureComponent {
render() {
return <WrappedComponent/>
}
}
}
const EnhanceComponent = enhanceComponent(App);
export default EnhanceComponent;
這里的名字隨便起.png
嵌套關(guān)系改變.png
-
類表達(dá)式, 可以省略NewComponent
顯示的名字.png - 所有的組件都可以起一個展示名稱, 開發(fā)中很少重新定義名稱
NewComponent.displayName = "Why"; - 給經(jīng)過處理的高階組件傳遞屬性
高階組件.png
- 高階組件并不是React API的一部分, 他是基于React的組合特性而形成的設(shè)計模式;
- displayName是給組件改名字
- 做了一個劫持, 可以做很多操作.
- 高階組件在hooks出現(xiàn)后用的比較少
- redus蝎土、路由, 很多東西用的都是高階組件
3. 高階組件的應(yīng)用
1. 增強(qiáng)props
增強(qiáng).png
-
context共享數(shù)據(jù)
context共享.png
2. 渲染判斷鑒權(quán)
- 在開發(fā)中, 我們可能遇到這樣的場景:
- 某些頁面是必須用戶登錄成功才能進(jìn)行進(jìn)入;
-
如果用戶沒有登錄成功, 那么直接跳轉(zhuǎn)到登錄頁面;
鑒權(quán).png
-
3. 對生命周期進(jìn)行劫持
生命周期劫持.png
- 打印渲染的耗時
- 不安全的生命周期函數(shù), UNSAFE_componentWillMount
- 早期的時候支持mixin: 混入
- hooks一定是未來, 真的好用
- 高階組件增強(qiáng)代碼的復(fù)用性, 寫出優(yōu)雅的代碼
- 反向繼承,
-
一邊學(xué)習(xí)一邊看官方文檔, 學(xué)習(xí)方法, 官方文檔中的專業(yè)詞匯, 也會涉及到其他的概念
不要創(chuàng)建自己的組件基類.png
4. 高階函數(shù)的意義
- 我們會發(fā)現(xiàn)利用高階組件可以針對某些React代碼進(jìn)行更加優(yōu)雅的處理.
- 其實早期的React有提供組件之間的一種復(fù)用方式是mixin, 目前已經(jīng)不再建議使用:
- Mixin可能會相互依賴, 相互耦合, 不利于代碼維護(hù)
- 不同的Mixin中的方法可能會相互沖突
- Mixin非常多時, 組件是可以感知到的, 甚至還要為其做相關(guān)處理, 這樣會給代碼造成滾雪球式的復(fù)雜性
- 當(dāng)然, HOC也有自己的一些缺陷:
- HOC需要在原組件上進(jìn)行包裹或者嵌套, 如果大量使用HOC, 將會產(chǎn)生非常多的嵌套, 折讓調(diào)試變得非常困難;
- HOC可以劫持props, 在不遵守約定的情況下也可能造成沖突;
- Hooks(React v16.8開始)的出現(xiàn), 是開創(chuàng)性的, 它解決了很多React之前存在的問題
- 比如this指向問題脖岛、比如hoc的嵌套復(fù)雜度問題等等
5. ref的轉(zhuǎn)發(fā)
- 在前面我們學(xué)習(xí)ref時講過, ref不能應(yīng)用于函數(shù)式組件
-
forwardRef, 高階組件是一個函數(shù)
ref的轉(zhuǎn)發(fā).png
6. Portals的使用
-
某些情況下, 我們希望渲染的內(nèi)容獨立于父組件, 甚至是獨立于當(dāng)前掛載到的DOM元素中(默認(rèn)都是掛載到id為root的DOM元素上的).
優(yōu)秀的方案.png
image.png
7. Modal組件案例
- 比如說, 我們準(zhǔn)備開發(fā)一個Modal組件, 它可以將它的子組件渲染到屏幕的中間位置
步驟一：修改index.html添加新的節(jié)點
<div id="root"></div>
<!-- 新節(jié)點 -->
<div id="modal"></div>
步驟二：編寫這個節(jié)點的樣式：
#modal {
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background-color: red;
}
步驟三：編寫組件代碼
import React, { PureComponent } from 'react';
import ReactDOM from 'react-dom';
class Modal extends PureComponent {
constructor(props) {
super(props);
}
render() {
return ReactDOM.createPortal(
this.props.children,
document.getElementById("modal")
)
}
}
export default class App extends PureComponent {
render() {
return (
<div>
<Modal>
<h2>我是標(biāo)題</h2>
</Modal>
</div>
)
}
}
coderwhy的React核心技術(shù)與開發(fā)實戰(zhàn)課程鏈接
少年~來做同學(xué)呀~.png
