定义:高阶组件就是一个函数,且该函数接受一个组件作为参数,并返回一个新的组件。

A higher-order component is a function that takes a component and returns a new component.

函数模拟高阶组件

  1. 最普通的方法,一个welcome,一个goodbye。两个函数先从localStorage读取了username,然后对username做了一些处理。
function welcome() {
let username = localStorage.getItem('username');
console.log('welcome ' + username);
} function goodbey() {
let username = localStorage.getItem('username');
console.log('goodbey ' + username);
} welcome();
goodbey();

我们发现两个函数有一句代码是一样的,这叫冗余。

我们要写一个中间函数,读取username,他来负责把username传递给两个函数。

function welcome(username) {
console.log('welcome ' + username);
} function goodbey(username) {
console.log('goodbey ' + username);
} function wrapWithUsername(wrappedFunc) {
let newFunc = () => {
let username = localStorage.getItem('username');
wrappedFunc(username);
};
return newFunc;
} welcome = wrapWithUsername(welcome);
goodbey = wrapWithUsername(goodbey); welcome();
goodbey();

好了,我们里面的wrapWithUsername函数就是一个“高阶函数”。
他做了什么?他帮我们处理了username,传递给目标函数。我们调用最终的函数welcome的时候,根本不用关心username是怎么来的。

我们增加个用户study函数。

function study(username){
console.log(username+' study');
}
study = wrapWithUsername(study); study();

这里你是不是理解了为什么说wrapWithUsername是高阶函数?我们只需要知道,用wrapWithUsername包装我们的study函数后,study函数第一个参数是username

我们写平时写代码的时候,不用关心wrapWithUsername内部是如何实现的。

高阶组件

高阶组件就是一个没有副作用的纯函数。

我们把上一节的函数统统改成react组件。

1、最普通的组件

welcome函数转为react组件。

import React, {Component} from 'react'

class Welcome extends Component {
constructor(props) {
super(props);
this.state = {
username: ''
}
} componentWillMount() {
let username = localStorage.getItem('username');
this.setState({
username: username
})
} render() {
return (
<div>welcome {this.state.username}</div>
)
}
} export default Welcome;

goodbey函数转为react组件。

import React, {Component} from 'react'

class Goodbye extends Component {
constructor(props) {
super(props);
this.state = {
username: ''
}
} componentWillMount() {
let username = localStorage.getItem('username');
this.setState({
username: username
})
} render() {
return (
<div>goodbye {this.state.username}</div>
)
}
} export default Goodbye;
  1. 按照上一节wrapWithUsername函数的思路,我们来写一个高阶组件(高阶组件就是一个函数,且该函数接受一个组件作为参数,并返回一个新的组件)。
import React, {Component} from 'react'

export default (WrappedComponent) => {
class NewComponent extends Component {
constructor() {
super();
this.state = {
username: ''
}
} componentWillMount() {
let username = localStorage.getItem('username');
this.setState({
username: username
})
} render() {
return <WrappedComponent username={this.state.username}/>
}
} return NewComponent
}

这样我们就能简化Welcome组件和Goodbye组件。

import React, {Component} from 'react';
import wrapWithUsername from 'wrapWithUsername'; class Welcome extends Component { render() {
return (
<div>welcome {this.props.username}</div>
)
}
} Welcome = wrapWithUsername(Welcome); export default Welcome;
import React, {Component} from 'react';
import wrapWithUsername from 'wrapWithUsername'; class Goodbye extends Component { render() {
return (
<div>goodbye {this.props.username}</div>
)
}
} Goodbye = wrapWithUsername(Goodbye); export default Goodbye;

高阶组件就是把username通过props传递给目标组件了。目标组件只管从props里面拿来用就好了。

到这里位置,高阶组件就讲完了。你再返回去理解下定义,是不是豁然开朗~

你现在理解react-reduxconnect函数~

reduxstateaction创建函数,通过props注入给了Component
你在目标组件Component里面可以直接用this.props去调用redux stateaction创建函数了。

ConnectedComment = connect(mapStateToProps, mapDispatchToProps)(Component);

相当于这样

// connect是一个返回函数的函数(就是个高阶函数)
const enhance = connect(mapStateToProps, mapDispatchToProps);
// 返回的函数就是一个高阶组件,该高阶组件返回一个与Redux store
// 关联起来的新组件
const ConnectedComment = enhance(Component);

antd的Form也是一样的

const WrappedNormalLoginForm = Form.create()(NormalLoginForm);

通俗理解 React 高阶函数的更多相关文章

  1. 用一个简单的例子来理解python高阶函数

    ============================ 用一个简单的例子来理解python高阶函数 ============================ 最近在用mailx发送邮件, 写法大致如 ...

  2. react高阶函数组件

    Layout as a Higher Order Component // components/MyLayout.js import Header from './Header'; const la ...

  3. react高阶组件的理解

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

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

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

  5. 学习React系列(九)——高阶函数

    定义:高阶组件就是一个函数,且该函数接收一个组件作为参数,并返回一个新的组件. (上一篇已经说过了高阶组件可以用来解决交叉问题) 一.不要改变原始组件,使用组合 class A extends Rea ...

  6. 理解运用JS的闭包、高阶函数、柯里化

    JS的闭包,是一个谈论得比较多的话题了,不过细细想来,有些人还是理不清闭包的概念定义以及相关的特性. 这里就整理一些,做个总结. 一.闭包 1. 闭包的概念 闭包与执行上下文.环境.作用域息息相关 执 ...

  7. JS高阶函数的理解(函数作为参数传递)

    JS高阶函数的理解 高阶函数是指至少满足下列条件之一的函数. · 函数可以作为参数被传递 · 函数可以作为返回值输出 一个例子,我们想在页面中创建100个div节点,这是一种写法.我们发现并不是所有用 ...

  8. Python之高阶函数如何理解?

    我们先要了解一下什么是所谓的高阶函数: 看定义:什么是高阶函数? 高阶函数:我们知道一个函数可以作为参数传给另外一个函数,或者一个函数的返回值为另外一个函数(若返回值为该函数本身,则为递归),如果满足 ...

  9. React.js高阶函数的定义与使用

    /* 高阶函数的简单定义与使用 一: 先定义一个普通组件 二: 用function higherOrder(WrappendComponent) { return } 将组件包裹起来,并用export ...

随机推荐

  1. springboot简单介绍

    1.springboot简单介绍 微服务架构 Spring Boot 是由 Pivotal 团队提供的全新框架,其设计目的是用来简化新 Spring 应用的初始搭建以及开发过程. 该框架使用了特定的方 ...

  2. jQuery蓝色修边tab标签切换

    jQuery蓝色修边tab标签切换,jQuery,tab选项卡,标签切换,jQuery蓝色修边tab标签广告代码切换是一款非常简单实用tab选项卡切换效果,自己定义好相关的html标签即可,选项卡切换 ...

  3. BZOJ 4582 [Usaco2016 Open]Diamond Collector:贪心【相差不超过k】

    题目链接:http://www.lydsy.com/JudgeOnline/problem.php?id=4582 题意: 给你n个数. 让你将其中的一些数放入两个不同的集合中,并保证同一集合内两两元 ...

  4. Use trained sklearn model with pyspark

    Use trained sklearn model with pyspark   from pyspark import SparkContext import numpy as np from sk ...

  5. B1/B2签证的有效期——对于B1/B2签证,停留期最长不超过183天

    一.关于签证有效期首先我们要知道当我们历经困难从签证官手里拿到自己的签证的时候,签证上面有个时间这个我们叫做签证有效期.B1/B2一般是一年多次往返的,这个只跟你申请的签证类型有关,与你填表的时候写的 ...

  6. Java企业微信开发_12_异常:java.lang.OutOfMemoryError: Java heap space

    一.异常现象 今天客户迁到正式环境,在做企业微信 接收消息服务器配置  时,出现如下异常: java.lang.OutOfMemoryError: Java heap space 二.异常原因 JAV ...

  7. linux 进程学习笔记-进程信号sigal

    信号(或软中断)是在软件层次上对中断的一个模拟,其运行在“用户空间”,一个进程对另外一个或几个进程通过发送信号来实现异步通信.当接收进程接收到信号后,其可以注册一下处理函数来说对这些信号进行处理(也可 ...

  8. linux 几个逼格高实用的命令

    1.xargs [root@gdpsq1x25 log]# find . -type f -name "*.log" |sort -rn./yum.log./sssd/sssd_s ...

  9. AtCoder Beginner Contest 103

    https://beta.atcoder.jp/contests/abc103 A - Task Scheduling Problem Time Limit: 2 sec / Memory Limit ...

  10. 休假回来 更博-MySQL以月为单位的客户综合情况表_20161008

    十一休假老家事比较多 未来得及更新 今起依旧更博- 生成一个以用户ID为单位,各月下单天次,各月买了几个产品,各月订单额 ,天次,,天次,,天次,NULL)) AS 9月天次 FROM ( SELEC ...