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

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高阶组件的人给予帮助~
 
 

版权声明：本文为jasonwang2y60原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/jasonwang2y60/p/8514451.html