快捷導(dǎo)航

React高階組件的使用淺析

更新時(shí)間：2022年08月13日 14:04:34 作者：是張魚小丸子鴨

高階組件就是接受一個(gè)組件作為參數(shù)并返回一個(gè)新組件（功能增強(qiáng)的組件）的函數(shù)。這里需要注意高階組件是一個(gè)函數(shù)，并不是組件，這一點(diǎn)一定要注意，本文給大家分享React高階組件使用小結(jié)，一起看看吧

高階函數(shù)

把一個(gè)函數(shù)作為另一個(gè)函數(shù)的參數(shù)，那么這個(gè)函數(shù)就是高階函數(shù)

高階組件

一個(gè)組件的參數(shù)是組件，并且返回值是一個(gè)組件，我們稱這類組件為高階組件

react常見的高階函數(shù)

withRouter（）

memo（）

react-redux中connect

高階組件形式

React中的高階組件主要有兩種形式：屬性代理和反向繼承

屬性代理：一個(gè)函數(shù)接收一個(gè)WrappedComponent組件作為參數(shù)傳入，并返回一個(gè)繼承React.Component組件的類，且在該類的render（）方法中返回被傳入的WrappedComponent組件

反向繼承：是一個(gè)函數(shù)接收一個(gè)WrappedComponent組件作為參數(shù)傳入，并返回一個(gè)繼承了該傳入的WrappedComponent組件的類，且在該類的render（）方法中返回super.render()方法

注意：反向繼承必須使用類組件，因?yàn)楹瘮?shù)組件沒有this指向

屬性繼承方式的代碼

function Goods(props) {
    console.log(props);
    return (
        <div className="box1">
            <h3 style={{color:props.color}}>Hello Js</h3>
        </div>
    )
}
//高階組件的代碼， 屬性代理的方式
function Color(WrapperComponent){
    return class Color extends React.Component{
        render(){
            console.log(this.props)
            let obj = {color:"#0088dd"}
            return (
                <WrapperComponent {...this.props} {...obj}/>
            )
        }
    }
}
export default Color(Goods);

高階組件我們也可以把他進(jìn)行單獨(dú)的剝離出來，然后把他在各個(gè)組件中使用

HOC.js文件

import React from 'react';
//高階組件的代碼， 屬性代理的方式
export default function Mouse(WrapperComponent){
    return class Mouse extends React.Component{
        constructor(props){
            super(props);
            this.state = {
                x:0,
                y:0,
            }
            this.getMouse();
        }
        getMouse = ()=>{
            document.addEventListener("mousemove",(event)=>{
                this.setState({
                    x:event.clientX,
                    y:event.clientY
                })
            })
        }
        render() {
            // console.log(this.state);
            return (
                <WrapperComponent {...this.props} {...this.state}/>
            )   
        }
    }
}

goods.js文件

import Mouse from "../context/HOC";
function Goods(props) {
    console.log(props);
    let {x,y} = props;
    return (
        <div className="box1">
            <div>
                鼠標(biāo)坐標(biāo):x:{x},y:{y}
            </div>
            <h3 >Hello Js</h3>
        </div>
    )
}
export default Mouse(Goods);

到此這篇關(guān)于React高階組件的使用淺析的文章就介紹到這了,更多相關(guān)React高階組件內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: