React 高阶组件

高阶函数

  • 函数可以作为参数被传递
image
  • 函数可以作为返回值输出
image

高阶组件

  • 高阶组件接受一个组件作为参数,并返回一个新组件的函数
  • 高阶组件是一个函数,并不是组件,只是为了方便而这么称呼

使用高阶组件

  1. higherOrderComponent(WrappedComponent)

    image
  2. @higherOrderComponent 装饰器

高阶组件应用

  • 代理方式

    返回的新组件直接继承React.Component类,新组件扮演的角色是传入组件的代理,在新组件的render函数中,将被包裹组件渲染出来,除了高阶组件自己做的工作,其余功能全部转手给了被包裹组件

  • 继承方式

    采用继承关联作为参数的组件和返回的组件,假如传入的组件参数是WrappedComponent,那么返回的组件就直接继承自WrappedComponent,这样就可以更改传入组件的生命周期或是一些属性和方法

代理方式高阶组件
  • 操作props

    新增props

    新增属性

    删除属性

    属性删除

  • 访问ref

  • 抽取状态 把input的状态控制提取出来

    [图片上传失败...(image-20394e-1560324084744)]

    受控组件 在传入组件内部的input直接展开{...this.newProps}

  • 包装组件

继承方式高阶组件
image
  • 操纵props
  • 操作生命周期

尽量使用代理方式,这样对原组件的侵入方式比较小,而继承方式,很容易影响到传入进来的组件

高阶组件名称

image

高阶组件的静态属性 displayName 就是组件名

推荐阅读更多精彩内容

  • 在目前的前端社区,『推崇组合,不推荐继承(prefer composition than inheritance)...
    Wenliang阅读 70,886评论 17 123
  • 前言 学习react已经有一段时间了,期间在阅读官方文档的基础上也看了不少文章,但感觉对很多东西的理解还是不够深刻...
    Srtian阅读 1,219评论 0 7
  • 高阶组件是对既有组件进行包装,以增强既有组件的功能。其核心实现是一个无状态组件(函数),接收另一个组件作为参数,然...
    柏丘君阅读 2,653评论 0 6
  • 在多个不同的组件中需要用到相同的功能,这个解决方法,通常有Mixin和高阶组件。Mixin方法例如: 但是由于Mi...
    小鱼小虾小海洋阅读 476评论 0 3
  • React进阶之高阶组件 前言 本文代码浅显易懂,思想深入实用。此属于react进阶用法,如果你还不了解react...
    流动码文阅读 935评论 0 1
  • 工作上,你觉得你很长时间内都没有什么进步,没有任何突破。你焦虑! 生活上,你一直想减肥,想让自己变得漂亮,想让...
    秋秋xyq阅读 63评论 0 0
  • 还是东野圭吾的书..... 《濒死之眼》讲的就是这样的一个故事,有时候你想忘记一些事,忘记一些人,可是天公不作美啊...
    张小葱阅读 235评论 1 0
  • 【憶戰友】:文/平湖秋月: 志同南越憶華年,春去秋來欲雲煙。 分合兩地傳書信,聚散無常苦海邊。 怎遣波濤太平景,回...
    浩舒阅读 150评论 2 7
  • 第一次玩简书 第一次写东西 我不好意思称我这三脚猫的文字为文章 我是个标标准准的理科女 初中的时候地理考了9分 当...
    hi_西柚啊阅读 92评论 0 0