react高阶组件的作用及应用的详解

如果下载的源码需要作者授权,请更换源码。本站免费分享资源不会增加授权

本篇文章给大家带来的内容是关于react高阶组件的作用及应用的详解,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

react高阶组件深入理解、作用以及应用

本文主要以通俗易懂的语言表达自己对高阶组件的一些见解,希望大家多多提问

高阶组件深入理解

高阶组件就是一个函数,传给它一个组件,它返回一个新的组件。新的组件使用传入的组件作为子组件。

首先根据定义我们明白它就是一个函数,而且它必须有返回值,返回值是一个组件,当然这里我们高阶组件可以嵌套(这里是一篇入门的文章,之后我会更新高阶组件多层嵌套)

高阶组件的作用

一直以来我们都是看到新的知识都是一直学习,一直看官方文档,没有静下心来想一想到底为什么这个新知识能够在这个时候出现?为什么它刚出现就这么火?它到底在什么情况下用?它能解决什么问题……等等这一系列的问题

我第一次见到这个词是在redux中解读connect组件时,看到这个词,官方文档也有具体说明个人推荐到这里去看,比官方文档,解释的更好

其实高阶组件就是把公用的一些部分提出来,把修改的部分以参数的形势传进去,在这里可能有人会说这那需用什么高阶组件,我自己封装一个组件也可以达到同样的效果,简单的组件在这里你可能通过封装来实现,但是我举两个例子大家在想一下怎么通过组建封装来实现:1、antd组件的form组件,2、我们在redux中组件顶部写一行代码@connect之后就可以在组件中通过this.props访问store中的数据和一些修改数据的方法

这里也许也会有一些大牛说我可以实现,但是大牛毕竟比较少,可能许多程序员在心理都会觉得自己是大牛,在这里我可以告大家一个检测自己实力的方法:就是没事的时候把建立投一下阿里或者是京东,然后去面试一下,我敢保证许多人就会现行;

高阶组件的用处

说了那么多废话,说点有用的吧,高阶组件一般用在那些地方呢

我们从一个实际问题来理解并学习高阶组件:有类似的几个组件但是组件内部只有少部分是不同的,它们身上都还有一些公用的方法,并且这些少部分组件组件都还要调用大组件的方法或者访问它的一些数据

我们来分一下:1,这几个组件的大部分样式和功能是相同的,我们可以可以思考能不能只写一次;2、它们不同的地方还会触发一些相同的方法;3、不同的地方只是内部的一小部分

如果我们按照组件封装的方法来实现的的话,我们封装一个大组件,然后把不同的小组件传进去,然后通过props把方法传到小组件,通过回调触发,但是这里有一个问题,我们写这几个组件的时候每次都要把大组件写一遍然后把子组件嵌入进去

加入这里我们采用高阶组件来实现的话,我们只需要把公用的方法和数据写到高阶函数返回的组件中,然后把组件传进去就可以了,最后在每个调用这个大组件的地方直接调用这个函数就可以了。

react高阶组件的作用及应用的详解

在上图中我们的代码可以这样来实现

//先写高阶组件 export default class HigherOrderComponent(InputComponent){     return class NewComponent extends Component{         constructor(){             super()             this.state={                 initalState:123             }         }         commonFunc=()=>{         }         render(){             return(                 <InputComponent data={this.state.initialSate} fun={this.commonFnn}/>             )         }     } } //再来写outerComponent import HigherOrderComponent from 'HigherOrderComponent'; import MinComponent1 from 'MinComponent1'; import MinComponent2 from 'MinComponent2'; class OuterComponent extends Component{     render(){         return(             <p>                 {HigherOrderComponent(minComponent1)}                 {HigherOrderComponent(minComponent2)}             </p>         )     } } 这样这个outerComponent就写完了,直接在这个编辑器里写的,代码可能会有以下小的错误,大家谅解

大家可以考虑一下这个组件加入要用我们组件封装嵌套的方式写的话能不能也写的简单点,欢迎大家在评论区写上自己的实现方式,方便大家一起讨论

高阶组件的应用

上面一不小心连高阶组件的应用也写了,大概就是这么个过程,希望可以对大家有一些帮助。

本文由(壳先生)整理自网络,如转载请注明出处:https://www.mrshell.com;
本站发布的内容若侵犯到您的权益,请邮件联系 i@mrshell.com 删除,我们将及时处理!
===========================================================================

1. 本站大部分下载资源收集于网络,不保证其完整性以及安全性,请下载后自行测试。
2. 本站资源仅供学习和交流使用,版权归资源原作者所有,请在下载后24小时之内自觉删除。
3. 不得使用于非法商业用途,商用请支持正版!不得违反国家法律,否则后果自负!
4. 若作商业用途,请购买正版,由于未及时购买和付费发生的侵权行为,与本站无关。
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!

=================================================================

壳先生 » react高阶组件的作用及应用的详解

发表评论

提供最优质的资源集合

立即查看 了解详情