react高階元件的一些運用

是你的琪吶發表於2020-12-01
React元件

今天學習了react高階元件，剛接觸react學習起來還是比較困難，和大家分享一下今天學習的知識吧，另外缺少的地方歡迎補充哈哈

 

高階元件(Higher Order Components,簡稱:HOC)

是 React 中用於重用元件邏輯的高階技術, 它本身不是react中的元件, 而是一個函式,
 這個函式接受一個react元件作為引數,並返回一個新元件, 實現了對原有元件的增強和優化, 
可以對原有元件中的state, props和邏輯執行增刪改操作, 一般用於程式碼重用和元件增強優化。
 

高階元件的使用場景

1, 需要程式碼重用時, react如果有多個元件都用到了同一段邏輯, 這時,就可以把共同的邏輯部分提取出來,
利用高階元件的形式將這段邏輯整合到每一個元件中, 從而減少程式碼的邏輯重複。
2, 需要元件增強優化時, 比如我們在專案中使用的元件有些不是自己寫的, 而是從網上C下來的, 
但是第三方寫的元件可能比較複雜, 有時不能完全滿足需求, 但第三方元件不易修改, 此時也可以用高階元件,
在不修改原始元件的前提下, 對元件新增滿足實際開發需求的功能。
 

高階元件的實現方式

高階元件的實現方式有兩種：

1, 屬性代理: 通過建立新組建來包裹原始元件, 把原始元件作為新組建的子元件渲染  
   功能: 可實現對原始元件的 props資料更新 和 元件模板更新。
　　下面是實現屬性代理的程式碼片段：
　　(1), 新建高階元件檔案 MyHOC.jsx
　　(2), 在檔案中建立函式 函式的引數是一個元件OldCom(引數可以自定義), 函式的返回值也是一個元件 NewCom(自定義)
 
　　 
function MyHoc(OldCom){
      return class NewCom extends React.Component{
        render(){
            let newProps = { age: 10, sex: '男' }
            return (
              <OldCom {...newProps} ></OldCom>
            )
        }
      }
    }

// 匯出高階元件函式
export default MyHOC;

// 屬性代理: 通過建立新組建來包裹原始元件, 把原始元件作為新組建的子元件渲染
// 功能: 可實現對原始元件的 props資料更新 和 元件模板更
 
2, 反向繼承: 通過建立新組建繼承自原始元件, 把原始元件作為父元件 
 　功能: 可實現對原始元件的state狀態資料更新 和 元件模板更新。
　 下面是實現反向繼承的程式碼片段：
　　 
 1 function MyHOC (OldCom){
 2       return class NewCom extends OldCom{
 3         componentDidMount() {
 4           this.setState({ name: '李四' })
 5         }
 6         render() {
 7           return super.render()
 8         }
 9       }
10     }
11 
12 // 匯出高階元件函式
13 export default MyHOC;
14 
15  // 反向繼承的state資料, 不能在render中改, 會進入死迴圈
16  // 一般在生命週期函式或自定義函式中更新state

高階元件的渲染劫持

通過高階元件可以把原始元件的模板進行修改和替換
渲染劫持指對一個元件渲染內容的裝飾或修改, 一般通過高階元件來實現, 
把一個元件傳入高階元件, 可以對這個元件的模板進行修改後執行渲染, 
也可以阻止元件渲染,並修改元件中的資料和邏輯。
下面是渲染劫持的程式碼片段
 
 1 function MyHOC (OldCom){
 2     return class NewCom extends OldCom{
 3         componentDidMount() {
 4             this.setState({ name: '李四' })
 5         }
 6         render() {
 7             // 以下模擬訂單頁渲染, 從狀態管理中取出登入狀態, 加以判斷
 8             let isLogin = true;
 9             if(isLogin){
10 
11                 // 此時,要渲染父元件,就要用父元件物件super渲染
12                     return super.render()
13              }else{
14                    this.props.history.push("/login")
15                     return null
16             }
17         }
18     }
19 }
20 export default MyHOC

 

渲染劫持的應用

 一般用於一些需要登入狀態的頁面, 在路由請求渲染頁面(如訂單頁)之前, 
使用高階元件判斷是否已登入,如果已登入,返回訂單頁模板, 如果沒有登入,返回空,並跳轉到登入頁
 

匯入

最後在使用用高階元件的時候，別忘了匯入元件，

路徑改成你檔案路徑匯入:

import 自定義名稱 from "高階元件所在路徑"
 
 
 
 
 

相關文章