react高阶组件的理解

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

复制代码
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高阶组件的人给予帮助~
 
 
posted @   Jason齐齐  阅读(1346)  评论(0)  编辑  收藏  举报
编辑推荐：
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
阅读排行：
· 10年+ .NET Coder 心语 ── 封装的思维：从隐藏、稳定开始理解其本质意义
· 地球OL攻略 —— 某应届生求职总结
· 提示词工程——AI应用必不可少的技术
· Open-Sora 2.0 重磅开源！
· 周边上新：园子的第一款马克杯温暖上架
点击右上角即可分享
微信分享提示
AI IDE Trae