内容简介:高阶函数: 接收函数作为输入,或者输出另一个函数的一类函数; 高阶组件: 接收React组件作为输入,输出一个新的React组件的组件。高阶组件通过包裹一个新传入的React组件,经过一些逻辑处理,最终返回一个enchanted的React组件,是其他组件调用.如果未定义displayName,那么进行调试的时候,就会显示如下:
React高阶组件
高阶函数: 接收函数作为输入,或者输出另一个函数的一类函数; 高阶组件: 接收React组件作为输入,输出一个新的React组件的组件。
高阶组件通过包裹一个新传入的React组件,经过一些逻辑处理,最终返回一个enchanted的React组件,是其他组件调用.
一些前提了解知识点
- ReactComponent: 定义调用时的组件name
function getDisplayName(component) { return component.displayName || component.name || 'Component'; } export default function WithHOC(WrapComponent) { // 此处未定义名称 return class extends React.Component { // 定义displayName; static displayName = `withHOC(${getDisplayName(WrapComponent)})`; render() { console.log('inside HOC'); return ( return <WrapComponent {...this.props} /> ) } } } App = WithHOC(App);
如果未定义displayName,那么进行调试的时候,就会显示如下:
// react自动定义名称 |---_class2 |---App ...
定义displayName后,显示如下:
|---withHOC(App) |---App ...
函数柯里化
- 柯里化 Curry
只传递函数的一部分参数来调用它,让它返回一个函数去处理剩下的参数
- 函数乔明 func(params)(otherParams);
在react里,通过函数柯里化,我们可以通过传入不同的参数来得到不同的高阶组件
基于属性代理的方式
属性代理最常见的高阶组件的使用方式,上述描述的高阶组件就是这种方式。它通过做一些操作,将被包裹组件的props和新生成的props一起传递给此组件,这称之为属性代理。
import React from 'react'; export default function withHeader(WrapperComponent) { return class extends React.Component { render() { const newProps = { test: 'hoc' }; // 透传props,并且传递新的newProps return ( <div> <WrapperComponent {...this.props} {...newProps} /> </div> ) } } }
基于反向继承的方式
这种方式返回的React组件继承了被传入的组件,所以它能够访问到的区域、权限更多,相比属性代理方式,它更像打入组织内部,对其进行修改。具体的可以参考附录里提供的链接进行深入学习。
export default function (WrappedComponent) { return class Inheritance extends WrappedComponent { componentDidMount() { // 可以方便地得到state,做一些更深入的修改。 console.log(this.state); } render() { return super.render(); } } }
组合多个高阶组件
上述高阶组件为React组件增强了一个功能,如果需要同时增加多个功能需要怎么做?这种场景非常常见,例如我既需要增加一个组件标题,又需要在此组件未加载完成时显示Loading.
@withHeader @withLoading class Demo extends Component{ }
使用compose可以简化上述过程,也能体现函数式编程的思想。
const enhance = compose(withHeader,withLoading); @enhance class Demo extends Component{ }
组合compose
compose可以帮助我们组合任意个(包括0个)高阶函数,例如compose(a,b,c)回一个新的函数d,函数d依然接受一个函数作为入参,只不过在内部会依次调用c,b,a,从表现层对使用者保持透明。
基于这个特性,我们便可以非常便捷地为某个组件增强或减弱其特征,只需要去变更compose函数里的参数个数便可。
compose函数实现方式有很多种,这里推荐其中一个recompact.compose,详情见下方参考类库。
recompact :包含了一系列实用的高阶组件库
React Sortable :React拖动库
深入理解 React 高阶组件 :其中详细介绍了属性代理和反向继承的区别。
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网
猜你喜欢:- React系列十 - 高阶组件以及组件补充
- 理解React高阶组件
- 【ReactNative】高阶组件
- React 进阶之高阶组件
- React HOC高阶组件详解
- [译] 深入理解 React 高阶组件
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
复杂网络理论及其应用
汪小帆、李翔、陈关荣 / 清华大学出版社 / 2006 / 45.00元
国内首部复杂网络专著 【图书目录】 第1章 引论 1.1 引言 1.2 复杂网络研究简史 1.3 基本概念 1.4 本书内容简介 参考文献 第2章 网络拓扑基本模型及其性质 2.1 引言 2.2 规则网络 2.3 随机图 2.4 小世界网络模型 2.5 无标度网络模型 ......一起来看看 《复杂网络理论及其应用》 这本书的介绍吧!