react高阶组件的理解

Posted 2020-10-26 Jason齐齐

【高阶组件和函数式编程】

function hello() {
    console.log(‘hello jason‘);
}
function WrapperHello(fn) {
    return function() {
        console.log(‘before say hello‘);
        fn();
        console.log(‘after say hello‘);
    }
}
// hello 这时候等于 WrapperHello函数中返回的 匿名函数
// 在设计模式中这种操作叫做 装饰器模式
// 高阶组件也是这种操作--把一个组件传入，再返回一个新的组件
hello = WrapperHello(hello)
hello()

 

【react中的高阶组件】--HOC   组件就是一个函数

 

存在两种高阶组件： 

1.属性代理---主要进行组件的复用

2.反向集成---主要进行渲染的劫持

 

 

属性代理的典型例子：

 

class Hello extends React.Component {
    render() {
        return <h4>hello Jason</h4>
    }
}
function WrapperHello(Comp) {
    class WrapComp extends React.Component {
        render() {
            return (
                <div>
                    <p>这是react高阶组件特有的元素</p>
                    <Comp {...this.props}></Comp>
                </div>
            )
        }
    }
    return WrapComp;
}
Hello = WrapperHello(Hello)

 

还可以写成装饰器的模式，装饰器就是一个典型的属性代理高阶组件

 

function WrapperHello(Comp) {
    class WrapComp extends React.Component {
        render() {
            return (
                <div>
                    <p>这是react高阶组件特有的元素</p>
                    <Comp {...this.props}></Comp>
                </div>
            )
        }
    }
    return WrapComp;
}
@WrapperHello
class Hello extends React.Component {
    render() {
        return <h4>hello Jason</h4>
    }
}

 

反向集成： 组件和包装组件之间的关系是继承关系而不是代理的方式，可以修改原组件的生命周期，渲染流程和业务逻辑

 

function WrapperHello(Comp) {
    class WrapComp extends Comp {
        componentDidMount() {
            console.log(‘反向代理高阶组件新增的生命周期,加载完成‘)
        }
        render() {
            return <Comp {...this.props}></Comp>
        }
    }
    return WrapComp;
}
@WrapperHello
class Hello extends React.Component {
    componentDidMount() {
        console.log(‘组件加载完成‘)
    }
    render() {
        return <h4>hello Jason</h4>
    }
}

 

控制台输出：

 

组件加载完成

反向代理高阶组件新增的生命周期,加载完成

 

希望对需要理解react高阶组件的人给予帮助~