一、概念

Higher-Order Components就是一個函數，傳給它一個組件，它返回一個新的組件。就相當于手機殼，通過包裝組件，增強組件功能，抽離公共邏輯。

二、步驟

2.1 創建一個函數

import React, { Component } from 'react';//創建一個函數 const Dom = (Comp) => {//在函數內執行class Hocdom extends Component {render() {return (<div>//子組件的名字與形參一致<Comp /></div>);}}//函數返回return Hocdom }//拋出 export default Dom;

2.2 搭建目錄結構

搭建一個父組件，一個子組件，高階組件用于包裝子組件。

?2.3? props數據傳遞問題

在該組件中，渲染參數組件，同時將狀態通過prop傳遞給參數組件

?2.4 添加邏輯，增強到子組件上

?三、裝飾器調用

高階組件理論上是可以無限嵌套的，像這樣。

?但是，這完全不符合程序員們的行事風格，我們需要的是高大上，需要的是整齊劃一，雖然是前端，但也有一顆向往后端的心，于是裝飾器出現了。

裝飾器是一種函數，寫成 @**函數名**。它可以放在類和類方法的定義前面。react腳手架創建的項目默認是不支持裝飾器，需要手動安裝相關模塊和添加配置文件。

? 安裝相關模塊

npm i -D customize-cra react-app-rewired

? 修改package.json文件中scripts命令

"scripts": {"start": "react-app-rewired start","build": "react-app-rewired build","test": "react-scripts test","eject": "react-scripts eject"} ?

? 在項目根目錄中添加config-overrides.js配置文件

此文件可以理解為就是webpack.config.js的擴展文件

const path = require('path') const {disableEsLint, addDecoratorsLegacy, override} = require('customize-cra') //目錄映射 const customize = () => (config, env) => {config.resolve.alias['@'] = path.join(__dirname, 'src')return config } //配置項 覆蓋webpack某些配置 module.exports = override(disableEsLint(),//eslintaddDecoratorsLegacy(),//開啟裝飾器customize()//啟用地址映射 ) ?

@babel/plugin-proposal-decorators裝飾器安裝坑2020-04-15 - 簡書

1.cnpm i @babel/plugin-proposal-decorators --dev 2.新建文件babel.config.js在根目錄 ? module.exports = {presets: [["@babel/preset-env"], // ES語法轉換],plugins: [['@babel/plugin-proposal-decorators', { 'legacy': true }]] };3.VSCODE 的設置里 搜索decorators 打鉤如圖

?四、memoization(計算屬性-記憶組件)

連續兩次相同傳參，第二次會直接返回上次的結果，每次傳參不一樣，就直接調用函數返回新的結果，會丟失之前的記錄，并不是完全記憶，可以在它的參數中傳入state數據從而實現了類似Vue中的計算屬性功能

特征：記憶組件，只記憶最近的一次的返回值

# 安裝
npm i -S memoize-one

# 引入
import memoizeOne from 'memoize-one'

# 使用
getValue = memoizeOne((x,y) => x+y)

# 調用
render(){
let total = this.getValue(this.state.x, this.state.y)
return <div>{total}</div>
}

?五、渲染屬性(Render Props)

5.1? 概念

渲染屬性是一種React組件之間使用一個值為函數的props共享代碼的簡單技術

簡單來說，我在父組件中向子組件添加了一個函數，子組件通過函數的調用傳入一個值或者模板，來調用父元素方法，或者將模板插入組件

問題：組件在 React 是主要的代碼復用單元，但如何共享狀態或一個組件的行為封裝到其他需要相同狀態的組件中并不是很明了。

核心思想：通過一個函數將class組件的state作為props傳遞給純函數組

代碼演示：

?運行結果：

?

總結

以上是生活随笔為你收集整理的React之HOC(高阶组件)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。