一、简介

如我们所知,JavaScript有高阶函数这么一个概念,高阶函数本身是一个函数,它会接收或者返回一个函数,进而对该函数进行操作。其实,在React中同样地有高阶组件这么一个东西,称为HOC,它也是一个函数,但是与高阶函数不同的是,高阶组件操作的是组件,它会接收一个组件作为参数,然后返回另外一个组件。通常,HOC会使用一个能够维护State或者包含若干功能的类来包装输入的组件,父组件保留State或者将若干功能作为属性向下传递给参数组件,参数组件不需要知道HOC代码实现的具体细节,它允许用户构建更多的无状态函数式组件,专心的管理自己的界面UI。所以说,高阶组件是组件之间功能复用的最佳方式。

二、使用

使用高阶组件,将上一篇博文中的国家列表的数据加载逻辑、显示逻辑进行分离,步骤如下:

1、封装一个列表组件,将数据的展示逻辑封装起来

//1、封装一个列表组件,将展示的逻辑封装起来
const ListComponent = ({data, selected=""}) =>
<select className="list" defaultValue={selected} style={{fontSize:,color:'red'}}>
{data.map(({name},i) => <option key={i} value={name}>{name}</option>)}
</select>;

2、封装一个数据组件,将数据的请求过程封装起来

//2、封装一个数据组件,将parse和loading的过程封装起来,这个组件会接收一个ParameterComponent组件,和一个url请求地址
const DataComponent = (ParameterComponent, url) => class DataComponent extends Component { constructor(props){
super(props);
this.state = {
data:[],
loading:false
}
} componentDidMount() {
this.setState({loading: true});
fetch(url)
          .then(response => response.json())
          .then(data => this.setState({loading:false, data:data}))
} render(){
const {loading} = this.state;
return (
<div className="data">
{(loading)? <div>now is Loading...</div> : <ParameterComponent {...this.state} {...this.props}/>}
</div>
)
}
};

3、创建父组件,传入列表组件和url

//3、创建数据组件,传入列表组件和url
const Country = DataComponent(ListComponent,"https://restcountries.eu/rest/v1/all");

4、挂载父组件

//导出
export default class App extends Component {
render() {
return <Country selected="China"/>
}
} //挂载
ReactDOM.render(
<App />,
document.getElementById('root')
);

三、结果

1、完整代码

import React, { Component } from 'react';
import fetch from "isomorphic-fetch"; //1、封装一个列表组件,将展示的逻辑封装起来
const ListComponent = ({data, selected=""}) =>
<select className="list" defaultValue={selected} style={{fontSize:,color:'red'}}>
{data.map(({name},i) => <option key={i} value={name}>{name}</option>)}
</select>; //2、封装一个数据组件,将parse和loading的过程封装起来
const DataComponent = (ParameterComponent, url) => class DataComponent extends Component { constructor(props){
super(props);
this.state = {
data:[],
loading:false
}
} componentDidMount() {
this.setState({loading: true});
fetch(url).then(response => response.json()).then(data => this.setState({loading:false, data:data}))
} render(){
const {loading} = this.state;
return (
<div className="data">
{(loading)? <div>now is Loading...</div> : <ParameterComponent {...this.state} {...this.props}/>}
</div>
)
}
}; //3、创建数据组件,传入列表组件和url
const Country = DataComponent(ListComponent,"https://restcountries.eu/rest/v1/all"); export default class App extends Component { render() {
return <Country selected="China"/>
}
}

2、演示截图

 

React: 高阶组件(HOC)的更多相关文章

  1. react系列(二)高阶组件-HOC

    高阶组件 简单来说,高阶组件可以看做一个函数,且该函数接受一个组件作为参数,并返回一个新的组件. 我在之前的博客<闭包和类>中提到一个观点,面向对象的好处就在于,易于理解,方便维护和复用. ...

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

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

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

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

  4. react高阶组件的理解

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

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

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

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

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

  7. 高阶函数 HOF & 高阶组件 HOC

    高阶函数 HOF & 高阶组件 HOC 高阶类 js HOC 高阶函数 HOF 函数作为参数 函数作为返回值 "use strict"; /** * * @author x ...

  8. React高阶组件学习笔记

    高阶函数的基本概念: 函数可以作为参数被传递,函数可以作为函数值输出. 高阶组件基本概念: 高阶组件就说接受一个组件作为参数,并返回一个新组件的函数. 为什么需要高阶组件 多个组件都需要某个相同的功能 ...

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

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

随机推荐

  1. CSS 导入-选择器-权重

    CSS 导入-选择器 Cascading Style Sheets 层叠样式表 它用来控制网页样式,并允许将样式代码与网页内容分离的一种标记性语言 CSS语法结构 选择器 声明{} 属性名:属性值 c ...

  2. c语言I博客专业06

    问题 答案 这个作业属于那个课程 C语言程序设计II 这个作业要求在哪里 https://edu.cnblogs.com/campus/zswxy/CST2019-2/homework/8655 我在 ...

  3. 格式化JS代码

    平常在项目中经常会遇到下载别人的js文件都是加密过的,不方便阅读都是一整行, 个人无法进行阅读,浏览器能够识别出来,所以就可以使用浏览器进行格式化js代码: 1.打开浏览器chrome为例,打开使用j ...

  4. python_编程面试题

    使用递归方法对一个数组求最大值和最小值 """ 用递归算法求解一个数组的最大值和最小值 思路: 1.首先假设这个列表只有1个元素或两个元素 2.再考虑超过两个元素的情况, ...

  5. 自动驾驶轻松开发?华为云ModelArts赋能智慧出行

    作为战略新兴产业,人工智能已经开始广泛应用于多个领域.近几年,科技公司.互联网公司等各领域的企业纷纷布局自动驾驶.那么,自动驾驶技术究竟发展得如何了?日前,华为云携手上海交通大学创新中心举办的华为云人 ...

  6. js之观察者模式和发布订阅模式区别

    观察者模式(Observer) 观察者模式指的是一个对象(Subject)维持一系列依赖于它的对象(Observer),当有关状态发生变更时 Subject 对象则通知一系列 Observer 对象进 ...

  7. iOS FMDatabase 本地数据库的创建和几个基本使用方法

    转自:http://blog.it985.com/3677.html 使用数据库之前当然要先在网上下载FMDB的库,然后添加到自己的工程里面去.没有的请点击下面的来下载 fmdb 在FrameWork ...

  8. BOM对象中的常用方法

    先看body中的内容: <body οnlοad="demo1()"> <p> <input type="button" id=& ...

  9. HDU-6114

    車是中国象棋中的一种棋子,它能攻击同一行或同一列中没有其他棋子阻隔的棋子.一天,小度在棋盘上摆起了许多車--他想知道,在一共N×M个点的矩形棋盘中摆最多个数的車使其互不攻击的方案数.他经过思考,得出了 ...

  10. k近邻聚类简介

    简介 在所有机器学习算法中,k近邻(K-Nearest Neighbors,KNN)相对是比较简单的. 尽管它很简单,但事实证明它在某些任务中非常有效,甚至更好.它可以用于分类和回归问题! 然而,它更 ...