React 高阶组件

沐沐 2023-03-28 原文

高阶组件（HOC）

高阶组件（Heigher Order Component）也被称之为高阶函数，容器组件，高阶组件是类组件编程中的一种重要代码逻辑复用技巧。

高阶组件的语法

接收一个React组件作为入参，经过修饰，最后返回一个新的React组件，所以这个入参的React组件被称之为“UI组件”；这个高阶组件被称之为“容器组件”。注意：在高阶组件中无论怎么对UI组件进行修改都不能修改。所以高阶组件是一种纯函数。

什么是纯函数

入参不能被修改，并且相同入参返回的是相同结果的函数，都叫做纯函数。

解决高阶组件导致属性丢失

封装自定义高阶组件时，如果props属性丢失，可以使用属性穿透（属性继承）解决

如何使用高阶组件

类组件可以使用Hoc(page)或者装饰器语法@page
函数组件只能使用Hoc(page)组件和高阶组件的区别

组件和高阶组件的区别

组件是将props转换为UI
高阶组件是将组件转换另一个组件

高阶组件的使用场景

在路由中withRounter()，在转台管理中content()，在Mobx中有inject()或者observer()
使用高阶组件给页码添加公共的视图结构，比如水印等。
使用高阶组件可以注入全局的公共方法，比如弹窗，校验等。
使用高阶组件可以添加相同的业务功能，比如DOM功能，BON功能，订阅功能等。
使用高阶组件可以实现权限设计。

    import { PureComponent } from "react";

    //高阶组件权限设计
    function studay (WrappedComponent){
        // return class extends PureComponent{
        //     render(){
        //         return(
        //             <>
        //                 <nav>导航栏</nav>
        //                 <WrappedComponent {...this.props}></WrappedComponent>
        //                 <footer>底部导航栏</footer>
        //             </>
        //         )
        //     }   
        // }
        return props =>(
            <>
                <nav>导航栏</nav>
                <WrappedComponent {...props}/>
                <footer>底部导航栏</footer>
            </>
        )
    }

    //
    const page = (arr) =>{
        console.log('权限',arr);
        //状态管理中的角色信息
        const roles = ['user']
        const flag = roles.some(ele=>arr.includes(ele))
        return WrappedComponent =>{
            return props =>(
                <>
                    {flag ? <WrappedComponent {...props}></WrappedComponent>: <h1>你的权限不足</h1>}
                </>
            )
        }
    }

    //封装浏览器窗口标题
    const title = title =>{
        return  Men => class extends PureComponent{
            componentDidMount(){
                document.title = title || '沐沐5'
            }
            render(){
                return(
                <Men {...this.props}></Men>
                )
            }
        }
    }
    
    //只有在class上才能使用装饰器语法
    @page(['admin',])
    @studay
    class A extends PureComponent{
        render(){
            console.log(this.props);
            return (
                <>
                    <h1>高阶组件</h1>
                </>
            )
        }
    }

    export default A

有关React 高阶组件的更多相关文章

ruby-on-rails - Ruby 长时间运行的进程对队列事件使用react - 2
我有一个将某些事件写入队列的Rails3应用。现在我想在服务器上创建一个服务，每x秒轮询一次队列，并按计划执行其他任务。除了创建ruby脚本并通过cron作业运行它之外，还有其他稳定的替代方案吗？最佳答案尽管启动基于Rails的持久任务是一种选择，但您可能希望查看更有序的系统，例如delayed_job或Starling管理您的工作量。我建议不要在cron中运行某些东西，因为启动整个Rails堆栈的开销可能很大。每隔几秒运行一次它是不切实际的，因为Rails上的启动时间通常为5-15秒，具体取决于您的硬件。不过，每天这样做几
python - 在 Ruby 中使用高阶函数 - 2
在学习Python之后，我现在正在尝试学习Ruby，但我在将这段代码转换为Ruby时遇到了问题:defcompose1(f,g):"""Returnafunctionh,suchthath(x)=f(g(x))."""defh(x):returnf(g(x))returnh我必须使用block来翻译吗？或者Ruby中是否有类似的语法？最佳答案您可以使用Ruby中的lambda执行此操作(我在这里使用的是1.9stabby-lambda):compose=->(f,g){->(x){f.(g.(x))}}所以compose是一个返
ruby - Ruby中的高阶迭代器？ - 2
我在阅读有关.each迭代器的Ruby问题，有人说如果更高阶的迭代器更适合该任务，则使用.each可能会产生代码味道。Ruby中的高阶迭代器是什么？编辑:我提到的StackOverflow答案的作者JörgWMittag提到他是要编写更高级别的迭代器，但他还解释了下面的内容。最佳答案哎呀。我的意思是更高级别的迭代器，而不是更高阶的迭代器。当然，每个迭代器都是高阶的。基本上，迭代是一个非常低级的概念。编程的目的是与团队中的其他利益相关者交流意图。“初始化一个空数组，然后遍历另一个数组，并将该数组的当前元素添加到第一个数组中(如果该
ruby - 单个 EventMachine react 器中的多个服务器 - 2
是否可以在单个事件机器中运行多个服务器？我的意思是，多个服务可以由一个客户端连接同时使用。例如，登录服务器对用户进行身份验证，然后用户可以同时使用聊天室和简单的游戏，例如带有单个客户端套接字的跳棋？或者我是否需要为每个服务使用多个事件机器react器？最佳答案我试过了，它正在工作:#!/usr/bin/envrubyrequire'eventmachine'moduleEchoServerdefpost_initputs"--someoneconnectedtotheechoserver!"enddefreceive_datad
Android Studio开发之使用内容组件Content获取通讯信息讲解及实战（附源码包括添加手机联系人和发短信） - 2
运行有问题或需要源码请点赞关注收藏后评论区留言一、利用ContentResolver读写联系人在实际开发中，普通App很少会开放数据接口给其他应用访问。内容组件能够派上用场的情况往往是App想要访问系统应用的通讯数据，比如查看联系人，短信，通话记录等等，以及对这些通讯数据及逆行增删改查。首先要给AndroidMaifest.xml中添加响应的权限配置下面是往手机通讯录添加联系人信息的例子效果如下分成三个步骤先查出联系人的基本信息，然后查询联系人号码，再查询联系人邮箱代码 ContactAddActivity类packagecom.example.chapter07;importandroid
ruby - 模块化、基于组件的 Sinatra 应用程序的架构 - 2
我正在开发一个包含大约10个不同功能组件的Sinatra应用程序。我们希望能够将这些组件混合并匹配到应用程序的单独实例中，完全从config.yaml文件配置，如下所示:components:-route:'/chunky'component_type:FoodListercomponent_settings:food_type:baconmax_items:400-route:'places/paris'component_type:Mappercomponent_settings:latitude:48.85387273165654longitude:2.340087890625-
ruby - 如何使用( ruby ) Rack 中间件组件设置 cookie？ - 2
我正在为需要有条件地设置cookie的Rails应用编写Rack中间件组件。我目前正在尝试设置cookie。通过谷歌搜索，这似乎应该可行:classRackAppdefinitialize(app)@app=appenddefcall(env)@status,@headers,@response=@app.call(env)@response.set_cookie("foo",{:value=>"bar",:path=>"/",:expires=>Time.now+24*60*60})[@status,@headers,@response]endend它不会给出错误，但也不会设置coo
ruby-on-rails - 哪些组件使 VIM 成为一个好的(伟大的)ruby 编辑器？ - 2
我正在linux机器上学习rubyonrails并磨练我的VIM技能(skillz？)。当我在使用C++的时候开始使用VIM时，我有一个friend有一个很棒的vimfiles文件夹，里面有很多东西可以开始使用。从头开始，vim很棒，但感觉它还可以做得更好。我目前有:vim-rubybufferexplorerxml-edit(虽然我目前没有它可以处理erb文件)我知道这只是一些更有经验的vim/ruby开发人员所拥有的东西的皮毛(包括vim.rc文件中的一次性)。在某个地方是否有一个列表(或者我们可以创建一个)使ruby(和rails)编程更有趣所需的一堆标准vim配置？是否有一
修改第三方UI组件库样式的四种方法 - 2
前提：当我们要修改vant组件库中Tabbar图标大小的样式（原图标是字体图标，大小由font-size控制）。字体图标字体大小由css变量（--van-tabbar-item-icon-size）控制， 1.插槽方法结论：当你想要自定义使用插槽时，插入自己的元素，那么可以直接在当前作用域直接修改元素的样式。自定义img{height:28px}传入图片，用height属性控制图片大小，达到与字体图标相同效果2.全局定义变量结论：全局定义一个变量，覆盖它默认变量的值定义变量缺点：全局修改。 :root{--van-tabbar-item-icon-size:30px!important;/
React通过classnames库添加类 - 2
React添加Class的方式在vue中添加class是一件非常简单的事情:你可以通过传入一个对象,通过布尔值决定是否添加类:button:class="{active:isFlag,aaa:true}">按钮button>你也可以传入一个数组:h2:class="['aaa','bbb']">HelloVueh2>h2:class="[className1,className2]">HelloVueh2>甚至是对象和数组混合使用:h2:class="['aaa',{active:isFlag}]">HelloVueh2>而在React中就相对繁琐了,React在JSX给了我们开发者足够多的灵