react 中的高阶组件

来源:http://www.sh-fengwen.com 作者:家常菜谱 人气:145 发布时间:2019-10-03
摘要:在 react 官方网站有高阶组件定义,高阶在乌克兰语中为 high order,以往在上学javascript的时候也频频听到高阶函数,可是听上去感觉挺高大尚,那一年照旧似懂非懂,跟人家聊起js时,也

在 react 官方网站有高阶组件定义,高阶在乌克兰语中为 high order,以往在上学 javascript 的时候也频频听到高阶函数,可是听上去感觉挺高大尚,那一年照旧似懂非懂,跟人家聊起js 时,也爱掏出那名词讲出一遍。但是一段时间,随着不断学习,才掌握高阶函数本质正是:函数能够作为函数的参数,重回值…被采纳,并没有怎么秘密。那么今后是否高阶组件也就没啥了,正是组件能够参数和再次回到值传入组件。

三个高阶组件就是四个函数,那么些函数接受三个零件作为输入,然后再次回到一个新的机件作为结果,并且,再次来到的新组件具备了输入组件所不具有的效果。大家能够那样打譬如,每一个组件最终都回去了一个jsx,而jsx实质上一个指标,也便是大家传入二个对象,最终回来了二个新指标,它装有参数对象不持有的法力

那边能够驾驭为一个函数接受三个零件作为参数,然后再次回到多少个零件,大家定义一位士列表组件,然后大家必要给组件增加新成效,也等于当加载服务端数据时,数据还未曾加载成功时,我们让列表页展现“加载中”,加载成功后显得列表。大家就足以选拔对列表组件封装一层决断,我们能够运用高阶组件来促成此成效

// 删除user这个props
  function removeUserProp(WrapperComponent){
    return class WrappingComponent extends React.Component{
      render(){
        const {user,...otherProps} = this.props
        return <WrapperComponent {...otherProps}>
      }
    }  
  }

图片 1

概念高阶组件的含义何在呢?

第一大家看率先个参数 propName 用于钦定我们依据那些参数来判别列表是否加载,假诺我们 hard coding 能够写成 this.props.list.length == 0 来推断是回来 <div>加载中</div> 依然列表组件。再次来到二个函数,这一个函数会接受参数 wrapperComponent 也便是列表组件,这里大家传入的是列表组件,看一看是什么使用这一个 LoaderHOC 高阶函数的吧

率先,重用代码 临时候相当多 React 组件都急需公用同样多少个逻辑,例如说 react-redux中容器组件的一些,不供给让种种组件都达成一次shouldComponentUpdate 这个生命周期函数,把那有些逻辑提抽出来,利用高阶组件的法子选择出去,就足以减小过多组件的双重代码

图片 2

附带,修改现存 React 组件的表现 有些现存 React 组件并非开者本人支付的,来自于第3方,只怕,尽管是我们和衷共济付出的,可是大家不想去触碰那些零件的里边逻辑,那时候高阶组件有了用武之地 通过三个单独于原有组件的函数,能够发生新的机件,对原有组件未有另外损害。

本文由美高梅游戏平台网站发布于家常菜谱,转载请注明出处:react 中的高阶组件

关键词:

上一篇:hyper-V pcie直通

下一篇:redux和react 01

最火资讯