react中高阶组件

2019年9月4日 107次阅读 来源: 永恒

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(
            <div>
                {HigherOrderComponent(minComponent1)}
                {HigherOrderComponent(minComponent2)}
            </div>
        )
    }
}
这样这个outerComponent就写完了,直接在这个编辑器里写的，代码可能会有以下小的错误，大家谅解
  • 大家可以考虑一下这个组件加入要用我们组件封装嵌套的方式写的话能不能也写的简单点，欢迎大家在评论区写上自己的实现方式，方便大家一起讨论

高阶组件的应用

  • 上面一不小心连高阶组件的应用也写了，大概就是这么个过程，希望可以对大家有一些帮助
  • 下班了，看明天有时间我把那两个小组件也更新一下，我们在小组件中可以通过this.props来访问高阶组件的方法和数据

谢谢……

    原文作者：永恒
    原文地址: https://segmentfault.com/a/1190000016818007
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞