日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學(xué)無(wú)先后，達(dá)者為師

網(wǎng)站首頁(yè) 編程語(yǔ)言 正文

react 高價(jià)組件HOC實(shí)現(xiàn)組件復(fù)用

作者：梨輕巧 更新時(shí)間： 2022-07-21 編程語(yǔ)言

目錄

一 使用步驟

二 顯示鼠標(biāo)坐標(biāo)

 三 鼠標(biāo)隨圖片移動(dòng)

四 設(shè)置displayName

五 傳遞props

高階組件HOC: Higher-Order Component,是一個(gè)函數(shù),接收要包裝的組件,返回增強(qiáng)后的組件
目的:實(shí)現(xiàn)狀態(tài)邏輯復(fù)用
高階組件就相當(dāng)于手機(jī)殼, 采用包裝(裝飾)模式

一 使用步驟


1 創(chuàng)建一個(gè)函數(shù),名稱約定以with開(kāi)頭
2 指定函數(shù)的參數(shù),參數(shù)以大寫(xiě)字母開(kāi)頭(作為要渲染的組件)
3 在函數(shù)內(nèi)部創(chuàng)建一個(gè)類組件,提供復(fù)用的狀態(tài)邏輯代碼,并返回
4 渲染參數(shù)組件,同時(shí)將狀態(tài)通過(guò)props傳遞給參數(shù)組件
5 調(diào)用該高階組件,傳入要增強(qiáng)的組件,通過(guò)返回值拿到增強(qiáng)后的組件,并將其渲染到頁(yè)面中

二 顯示鼠標(biāo)坐標(biāo)

import React from "react";
import ReactDOM from "react-dom";

// 1 創(chuàng)建一個(gè)函數(shù),名稱約定以with開(kāi)頭
// 2 指定函數(shù)的參數(shù),參數(shù)以大寫(xiě)字母開(kāi)頭(作為要渲染的組件)
function withMouse(WrappedComponent) {

    // 3 在函數(shù)內(nèi)部創(chuàng)建一個(gè)類組件,提供復(fù)用的狀態(tài)邏輯代碼,并返回
    class Mouse extends React.Component {

        //鼠標(biāo)狀態(tài)
        state = {
            x: 0,
            y: 0
        }

        //處理狀態(tài)的邏輯代碼
        handleMouseMove = e => {
            this.setState({
                x: e.clientX,
                y: e.clientY
            })
        }

        //監(jiān)聽(tīng)鼠標(biāo)移動(dòng)事件
        componentDidMount() {
            window.addEventListener("mousemove", this.handleMouseMove)
        }

        //解綁事件
        componentWillUnmount() {
            window.removeEventListener('mousemove', this.handleMouseMove)
        }

        render() {
            //4 渲染參數(shù)組件,同時(shí)將狀態(tài)通過(guò)props傳遞給參數(shù)組件
            return <WrappedComponent {...this.state}/>

        }

    }
    return Mouse;
}

const Position = props => (
    <p>
        鼠標(biāo)當(dāng)前位置:(x:{props.x},y:{props.y})
    </p>
)

//調(diào)用該高階組件,傳入要增強(qiáng)的組件,通過(guò)返回值拿到增強(qiáng)后的組件,并將其渲染到頁(yè)面中
const MousePosition = withMouse(Position)

class App extends React.Component {

    render() {
        return (
            <div>
                {/*渲染增強(qiáng)后的組件*/}
                <MousePosition/>
            </div>)
    }
}

ReactDOM.render(<App/>, document.getElementById("root"));

效果

 三 鼠標(biāo)隨圖片移動(dòng)

加入鼠標(biāo)隨圖片移動(dòng)的功能

import imgage from "./images/cat.jpg"

const Cat = props => (
    <img src={imgage} alt='貓' style={{
        position: 'absolute',
        // 為了讓鼠標(biāo)在圖片的中間,top減掉了圖片的一半高度,left減掉了圖片一半的寬度
        top: props.y - 180,
        left: props.x - 180
    }}/>
)


//調(diào)用該高階組件,傳入要增強(qiáng)的組件,通過(guò)返回值拿到增強(qiáng)后的組件,并將其渲染到頁(yè)面中
const MousePosition1 = withMouse(Cat)

完整代碼

import React from "react";
import ReactDOM from "react-dom";
import imgage from "./images/cat.jpg"

// 1 創(chuàng)建一個(gè)函數(shù),名稱約定以with開(kāi)頭
// 2 指定函數(shù)的參數(shù),參數(shù)以大寫(xiě)字母開(kāi)頭(作為要渲染的組件)
function withMouse(WrappedComponent) {

    // 3 在函數(shù)內(nèi)部創(chuàng)建一個(gè)類組件,提供復(fù)用的狀態(tài)邏輯代碼,并返回
    class Mouse extends React.Component {

        //鼠標(biāo)狀態(tài)
        state = {
            x: 0,
            y: 0
        }

        //處理狀態(tài)的邏輯代碼
        handleMouseMove = e => {
            this.setState({
                x: e.clientX,
                y: e.clientY
            })
        }

        //監(jiān)聽(tīng)鼠標(biāo)移動(dòng)事件
        componentDidMount() {
            window.addEventListener("mousemove", this.handleMouseMove)
        }

        //解綁事件
        componentWillUnmount() {
            window.removeEventListener('mousemove', this.handleMouseMove)
        }

        render() {
            //4 渲染參數(shù)組件,同時(shí)將狀態(tài)通過(guò)props傳遞給參數(shù)組件
            return <WrappedComponent {...this.state}/>

        }

    }
    return Mouse;
}


const Cat = props => (
    <img src={imgage} alt='貓' style={{
        position: 'absolute',
        // 為了讓鼠標(biāo)在圖片的中間,top減掉了圖片的一半高度,left減掉了圖片一半的寬度
        top: props.y - 125,
        left: props.x - 100
    }}/>
)


//調(diào)用該高階組件,傳入要增強(qiáng)的組件,通過(guò)返回值拿到增強(qiáng)后的組件,并將其渲染到頁(yè)面中
const MousePosition1 = withMouse(Cat)

const Position = props => (
    <p>
        鼠標(biāo)當(dāng)前位置:(x:{props.x},y:{props.y})
    </p>
)

//調(diào)用該高階組件,傳入要增強(qiáng)的組件,通過(guò)返回值拿到增強(qiáng)后的組件,并將其渲染到頁(yè)面中
const MousePosition2 = withMouse(Position)

class App extends React.Component {

    render() {
        return (
            <div>
                {/*渲染增強(qiáng)后的組件*/}
                <MousePosition1/>
                <MousePosition2/>
            </div>)
    }
}

ReactDOM.render(<App/>, document.getElementById("root"));

四 設(shè)置displayName

默認(rèn)情況下,react使用組件名稱作為displayName
使用高階組件存在的問(wèn)題: 得到的兩個(gè)組件名稱相同


解決辦法: 設(shè)置displayName → 用于調(diào)試時(shí)區(qū)分不同的組件

 效果

完整代碼

import React from "react";
import ReactDOM from "react-dom";
import imgage from "./images/cat.jpg"

// 1 創(chuàng)建一個(gè)函數(shù),名稱約定以with開(kāi)頭
// 2 指定函數(shù)的參數(shù),參數(shù)以大寫(xiě)字母開(kāi)頭(作為要渲染的組件)
function withMouse(WrappedComponent) {

    // 3 在函數(shù)內(nèi)部創(chuàng)建一個(gè)類組件,提供復(fù)用的狀態(tài)邏輯代碼,并返回
    class Mouse extends React.Component {

        //鼠標(biāo)狀態(tài)
        state = {
            x: 0,
            y: 0
        }

        //處理狀態(tài)的邏輯代碼
        handleMouseMove = e => {
            this.setState({
                x: e.clientX,
                y: e.clientY
            })
        }

        //監(jiān)聽(tīng)鼠標(biāo)移動(dòng)事件
        componentDidMount() {
            window.addEventListener("mousemove", this.handleMouseMove)
        }

        //解綁事件
        componentWillUnmount() {
            window.removeEventListener('mousemove', this.handleMouseMove)
        }

        render() {
            //4 渲染參數(shù)組件,同時(shí)將狀態(tài)通過(guò)props傳遞給參數(shù)組件
            return <WrappedComponent {...this.state}/>

        }

    }

    //設(shè)置displayName
    Mouse.displayName = `withMouse${getDisplayName(WrappedComponent)}`
    return Mouse;
}
//displayName
function getDisplayName(WrappedComponent) {
    return WrappedComponent.displayName || WrappedComponent.name || 'Component'
}

const Cat = props => (
    <img src={imgage} alt='貓' style={{
        position: 'absolute',
        // 為了讓鼠標(biāo)在圖片的中間,top減掉了圖片的一半高度,left減掉了圖片一半的寬度
        top: props.y - 125,
        left: props.x - 100
    }}/>
)


//調(diào)用該高階組件,傳入要增強(qiáng)的組件,通過(guò)返回值拿到增強(qiáng)后的組件,并將其渲染到頁(yè)面中
const MousePosition1 = withMouse(Cat)

const Position = props => (
    <p>
        鼠標(biāo)當(dāng)前位置:(x:{props.x},y:{props.y})
    </p>
)

//調(diào)用該高階組件,傳入要增強(qiáng)的組件,通過(guò)返回值拿到增強(qiáng)后的組件,并將其渲染到頁(yè)面中
const MousePosition2 = withMouse(Position)

class App extends React.Component {

    render() {
        return (
            <div>
                {/*渲染增強(qiáng)后的組件*/}
                <MousePosition1/>
                <MousePosition2/>
            </div>)
    }
}

ReactDOM.render(<App/>, document.getElementById("root"));

五 傳遞props

問(wèn)題:

添加了一個(gè)屬性, 打印了props

 屬性沒(méi)顯示在props里

 

原因:props傳遞丟失

解決辦法:

 效果

 完整代碼

import React from "react";
import ReactDOM from "react-dom";


// 1 創(chuàng)建一個(gè)函數(shù),名稱約定以with開(kāi)頭
// 2 指定函數(shù)的參數(shù),參數(shù)以大寫(xiě)字母開(kāi)頭(作為要渲染的組件)
function withMouse(WrappedComponent) {

    // 3 在函數(shù)內(nèi)部創(chuàng)建一個(gè)類組件,提供復(fù)用的狀態(tài)邏輯代碼,并返回
    class Mouse extends React.Component {

        //鼠標(biāo)狀態(tài)
        state = {
            x: 0,
            y: 0
        }

        //處理狀態(tài)的邏輯代碼
        handleMouseMove = e => {
            this.setState({
                x: e.clientX,
                y: e.clientY
            })
        }

        //監(jiān)聽(tīng)鼠標(biāo)移動(dòng)事件
        componentDidMount() {
            window.addEventListener("mousemove", this.handleMouseMove)
        }

        //解綁事件
        componentWillUnmount() {
            window.removeEventListener('mousemove', this.handleMouseMove)
        }

        render() {
            //4 渲染參數(shù)組件,同時(shí)將狀態(tài)通過(guò)props傳遞給參數(shù)組件
            return <WrappedComponent {...this.state}{...this.props}/>

        }

    }

    return Mouse;
}


const Position = props => {
    console.log(props)
    return (
        <p>
            鼠標(biāo)當(dāng)前位置:(x:{props.x},y:{props.y})
        </p>
    )

}

//調(diào)用該高階組件,傳入要增強(qiáng)的組件,通過(guò)返回值拿到增強(qiáng)后的組件,并將其渲染到頁(yè)面中
const MousePosition = withMouse(Position)

class App extends React.Component {

    render() {
        return (
            <div>
                {/*渲染增強(qiáng)后的組件*/}
                <MousePosition a="1"/>
            </div>)
    }
}

ReactDOM.render(<App/>, document.getElementById("root"));


原文鏈接：https://blog.csdn.net/m0_45877477/article/details/125896275

欄目分類
最近更新