亲宝软件园·资讯

展开

React高阶组件

是张鱼小丸子鸭 人气:0

在学习高阶组件前,首先我们了解一下高阶函数

高阶函数

把一个函数作为另一个函数的参数,那么这个函数就是高阶函数

高阶组件

一个组件的参数是组件,并且返回值是一个组件,我们称这类组件为高阶组件

react常见的高阶函数

withRouter()

memo()

react-redux中connect

高阶组件形式

React中的高阶组件主要有两种形式:属性代理和反向继承

属性代理:一个函数接收一个WrappedComponent组件作为参数传入,并返回一个继承React.Component组件的类,且在该类的render()方法中返回被传入的WrappedComponent组件

反向继承:是一个函数接收一个WrappedComponent组件作为参数传入,并返回一个继承了该传入的WrappedComponent组件的类,且在该类的render()方法中返回super.render()方法

注意:反向继承必须使用类组件,因为函数组件没有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);

高阶组件我们也可以把他进行单独的剥离出来,然后把他在各个组件中使用

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>
                鼠标坐标:x:{x},y:{y}
            </div>
            <h3 >Hello Js</h3>
        </div>
    )
}
export default Mouse(Goods);

加载全部内容

相关教程
猜你喜欢
用户评论