2oe
随笔 - 43,  文章 - 3,  评论 - 2,  阅读 - 10255

高阶组件

增强组件的功能
本身是一个函数
参数是一个组件,返回值也是一个组件
传入一个组件返回一个组件

非侵入  不需要组件内部状态
侵入    需要组件内部状态

高阶函数

增强函数的功能
传入一个函数返回一个函数

Vuex,redux 跨组件通讯

Vuex事件系统

同步 
    mutatinon 
    commit

异步 
    action
    dispatch

VueX,redux(store)=>组件=>action=>Vuex

Ant design UI库/组件库

高阶组件

接受一个组件,返回一个新的组件
非侵入式 ...this.props
侵入式 super

super当成方法  指向this指针
super当成对象  指向父类

继承

函数继承  闭包=块级作用域
    prototype
    
类的继承
    extends

非侵入式

import React from 'react'

// 非侵入式组件
export default (WrapCompoennt)=>{
    return class extends React.Component {
        render() {
            return (
                <div>
                    <div style={{background:'skyblue',padding:'10px',display:'flex'}}>
                        <p>请下载淘票票</p>
                        <a href="https://h5.m.taopiaopiao.com/app/moviemain/pages/index/index.html?from=outer">下载</a>
                    </div>
                    <WrapCompoennt {...this.props}/>
                </div>
            )
        }
    }
}

侵入式

import React from 'react'
import Loading from '../common/Loading'
// 侵入式组件
export default (WrapCompoennt)=>{
    return class extends WrapCompoennt{
        render() {
            if(this.state.showLoading){
                return <Loading></Loading>
            }else{
                return super.render();
            }
        }
    }
}
posted on   2oe  阅读(112)  评论(0编辑  收藏  举报
编辑推荐:
· 现代计算机视觉入门之:什么是图片特征编码
· .NET 9 new features-C#13新的锁类型和语义
· Linux系统下SQL Server数据库镜像配置全流程详解
· 现代计算机视觉入门之:什么是视频
· 你所不知道的 C/C++ 宏知识
阅读排行:
· 不到万不得已,千万不要去外包
· C# WebAPI 插件热插拔(持续更新中)
· 会议真的有必要吗?我们产品开发9年了,但从来没开过会
· 【译】我们最喜欢的2024年的 Visual Studio 新功能
· 如何打造一个高并发系统?

< 2025年1月 >
29 30 31 1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31 1
2 3 4 5 6 7 8
点击右上角即可分享
微信分享提示