高阶函数的基本概念:

  函数可以作为参数被传递,函数可以作为函数值输出。

高阶组件基本概念:

  高阶组件就说接受一个组件作为参数,并返回一个新组件的函数。

为什么需要高阶组件

  多个组件都需要某个相同的功能,使用高阶组件减少重复实现。

编写高阶组件:

  1.实现一个普通组件。

  2.把普通组件用函数包裹,并用return 抛出,函数要接受一个参数。

import React from 'react';

//高阶组件传入一个组件再返回一个新的组件
function CompWrap(Com) {
return props =>
<div >
<Com {...props} />
<p>性别:{props.sex}</p>
</div> }
function Comp(props) {
return (
<div>
<p>姓名:{props.name}</p>
<p>年龄:{props.age}</p>
</div>
)
}
export default CompWrap(Comp)

使用高阶组件:

  方一:higherOrderComponent(Com)

  方二:@higherOrderComponent(详见:React-使用装饰器

嵌套高阶组件

import React from 'react';
function CompWrapWrapWrap(Com) {
console.log('CompWrapWrapWrap')
return props =>
<div >
<h1>CompWrapWrapWrap信息:</h1>
<Com {...props} />
</div> }
function CompWrapWrap(Com) {
console.log('CompWrapWrap')
return props =>
<div >
<h1>CompWrapWrap信息:</h1>
<Com {...props} />
</div> }
function CompWrap(Com) {
console.log('CompWrap')
return props =>
<div >
<Com {...props} />
<p>性别:{props.sex}</p>
</div> }
function Comp(props) {
console.log('Comp')
return (
<div>
<p>姓名:{props.name}</p>
<p>年龄:{props.age}</p>
</div>
)
}
export default CompWrapWrapWrap(CompWrapWrap(CompWrap(Comp)))

控制台打印结果

aaarticlea/png;base64,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" alt="" />

高阶组件的应用

https://www.cnblogs.com/libin-1/p/7087605.html

React高阶组件学习笔记的更多相关文章

  1. 利用 React 高阶组件实现一个面包屑导航

    什么是 React 高阶组件 React 高阶组件就是以高阶函数的方式包裹需要修饰的 React 组件,并返回处理完成后的 React 组件.React 高阶组件在 React 生态中使用的非常频繁, ...

  2. react高阶组件的一些运用

    今天学习了react高阶组件,刚接触react学习起来还是比较困难,和大家分享一下今天学习的知识吧,另外缺少的地方欢迎补充哈哈 高阶组件(Higher Order Components,简称:HOC) ...

  3. 聊聊React高阶组件(Higher-Order Components)

    使用 react已经有不短的时间了,最近看到关于 react高阶组件的一篇文章,看了之后顿时眼前一亮,对于我这种还在新手村晃荡.一切朝着打怪升级看齐的小喽啰来说,像这种难度不是太高同时门槛也不是那么低 ...

  4. 当初要是看了这篇,React高阶组件早会了

    当初要是看了这篇,React高阶组件早会了. 概况: 什么是高阶组件? 高阶部件是一种用于复用组件逻辑的高级技术,它并不是 React API的一部分,而是从React 演化而来的一种模式. 具体地说 ...

  5. react高阶组件的理解

    [高阶组件和函数式编程] function hello() { console.log('hello jason'); } function WrapperHello(fn) { return fun ...

  6. 函数式编程与React高阶组件

    相信不少看过一些框架或者是类库的人都有印象,一个函数叫什么creator或者是什么什么createToFuntion,总是接收一个函数,来返回另一个函数.这是一个高阶函数,它可以接收函数可以当参数,也 ...

  7. React——高阶组件

    1.在React中higher-order component (HOC)是一种重用组件逻辑的高级技术.HOC不是React API中的一部分.HOC是一个函数,该函数接收一个组件并且返回一个新组件. ...

  8. react 高阶组件的 理解和应用

    高阶组件是什么东西 简单的理解是:一个包装了另一个基础组件的组件.(相对高阶组件来说,我习惯把被包装的组件称为基础组件) 注意:这里说的是包装,可以理解成包裹和组装: 具体的是高阶组件的两种形式吧: ...

  9. react高阶组件的使用

    为了提高代码的复用在react中我们可以使用高阶组件 1.添加高阶组件 高阶组件主要代码模板HOC.js export default (WrappedComponent) => { retur ...

随机推荐

  1. arcgis 面或线要素类上的搜索游标

    import arcpy infc = arcpy.GetParameterAsText(0) # Identify the geometry field # desc = arcpy.Describ ...

  2. mysql表的模糊查询

    查询库下所有的表名 SELECT table_name FROM information_schema.tables WHERE table_schema='库名' 模糊表名查询 SELECT tab ...

  3. mongodb的更新操作符

    mongodb更新有两个命令:1).update()命令 db.collection.update( criteria, objNew, upsert, multi ) criteria : upda ...

  4. git 命令简洁手册

    1.从当前目录初始化 git init 2.对文件进行跟踪 或  将已跟踪的文件放到暂缓区 或 把有冲突的文件标记为已解决状态 git add <file> 3.从现有仓库克隆 git c ...

  5. LinearLayout线性布局

    作用 : 线性布局会将容器中的组件一个一个排列起来, LinearLayout可以控制组件横向或者纵向排列, 通过android:orientation属性控制; 不换行属性 : 线性布局中的组件不会 ...

  6. backbone之module

    上一篇列出了collection的代码,下面要把代码进行分离 //先是app.js var ContactManager = new Marionette.Application(); Contact ...

  7. Spring-Kafka —— 消费后不提交offset情况的分析总结

    最近在使用kafka,过程中遇到了一些疑问,在查阅了一些资料和相关blog之后,关于手动提交offset的问题,做一下总结和记录. 消费端手动提交offset代码如下: /** * 这是手动提交的消费 ...

  8. DevOps - DevOps工具链

    不要满足于使用世界上已存在的各种方法和技术,而应重点放在希望达到的效果上! 单单使用工具不难,困难的是在团队开发中熟练使用,并形成一套理想的工作流程,只有在团队中工具和思想才能发挥最大价值. 开源工具 ...

  9. Python 网络通信协议(互联网协议)

    一. 操作系统基础 操作系统(Operatin System,简称OS)是管理和控制计算机硬件与软件资源的计算机程序,是直接运行在"裸机"上的最基本的系统软件,任何其他软件都必须在 ...

  10. 使用青花瓷(charles)抓包

    官网下载charles: https://www.charlesproxy.com/download/ MAC & Apple 打开青花瓷charles 找到本地IP:青花瓷里面Help-&g ...