React: 高阶组件(HOC)
一、简介
如我们所知,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)的更多相关文章
- react系列(二)高阶组件-HOC
高阶组件 简单来说,高阶组件可以看做一个函数,且该函数接受一个组件作为参数,并返回一个新的组件. 我在之前的博客<闭包和类>中提到一个观点,面向对象的好处就在于,易于理解,方便维护和复用. ...
- 聊聊React高阶组件(Higher-Order Components)
使用 react已经有不短的时间了,最近看到关于 react高阶组件的一篇文章,看了之后顿时眼前一亮,对于我这种还在新手村晃荡.一切朝着打怪升级看齐的小喽啰来说,像这种难度不是太高同时门槛也不是那么低 ...
- 当初要是看了这篇,React高阶组件早会了
当初要是看了这篇,React高阶组件早会了. 概况: 什么是高阶组件? 高阶部件是一种用于复用组件逻辑的高级技术,它并不是 React API的一部分,而是从React 演化而来的一种模式. 具体地说 ...
- react高阶组件的理解
[高阶组件和函数式编程] function hello() { console.log('hello jason'); } function WrapperHello(fn) { return fun ...
- 函数式编程与React高阶组件
相信不少看过一些框架或者是类库的人都有印象,一个函数叫什么creator或者是什么什么createToFuntion,总是接收一个函数,来返回另一个函数.这是一个高阶函数,它可以接收函数可以当参数,也 ...
- react高阶组件的一些运用
今天学习了react高阶组件,刚接触react学习起来还是比较困难,和大家分享一下今天学习的知识吧,另外缺少的地方欢迎补充哈哈 高阶组件(Higher Order Components,简称:HOC) ...
- 高阶函数 HOF & 高阶组件 HOC
高阶函数 HOF & 高阶组件 HOC 高阶类 js HOC 高阶函数 HOF 函数作为参数 函数作为返回值 "use strict"; /** * * @author x ...
- React高阶组件学习笔记
高阶函数的基本概念: 函数可以作为参数被传递,函数可以作为函数值输出. 高阶组件基本概念: 高阶组件就说接受一个组件作为参数,并返回一个新组件的函数. 为什么需要高阶组件 多个组件都需要某个相同的功能 ...
- 利用 React 高阶组件实现一个面包屑导航
什么是 React 高阶组件 React 高阶组件就是以高阶函数的方式包裹需要修饰的 React 组件,并返回处理完成后的 React 组件.React 高阶组件在 React 生态中使用的非常频繁, ...
随机推荐
- JavaScript的定时器是如何工作的
理解JavaScript定时器工作原理对于学习JavaScript非常重要.因为JavaScript是单线程运行的,定时器使用场合少,不是很直观.下面通过三个函数来学习JavaScript如何定义,操 ...
- mysql那些事(2)时间类型数据如何存储
几乎每次数据库建模的时候,都会遇到时间类型数据存储的问题. mysql存储时间通常选择这四种类型:datetime.timestamp.int和bigint四种方式,到底使用什么类型,需要看具体的业务 ...
- 基于webpack实现多html页面开发框架五 开发环境配置 babel配置
一.解决什么问题 1.开发环境js.css不压缩,可在浏览器选中代码调试 2.开发环境运行http服务指向打包后的文件夹 3.babel输出浏览器兼容的js代码 二.需要 ...
- Asp.net Core 3.0 Identity 使用smtp账户确认和密码恢复
当新建一个core项目后,使用identity基架后,确认邮件出现了错误,并不能正常使用. 建立文档在这里 https://docs.microsoft.com/zh-cn/aspnet/core/s ...
- 为什么QQ能帮你找到失散多年的兄弟?----图论
编程三分钟的第 44 篇原创文章 为什么qq里"可能认识的人"功能推荐的如此精准? 为什么两个没有什么联系的朋友会相互认识? 一切的背后到底是道德的沦丧,还是人性的扭曲 ? 让我们 ...
- Unity3D for iOS初级教程:Part 3/3(下)
转自:http://www.cnblogs.com/alongu3d/archive/2013/06/01/3111739.html 消息不会自动消除 你基本的游戏功能已经完成了,但是显示一些关于游戏 ...
- node.js调试入门
1-1 Inspector介绍 使用Inspector调试Node.js的优势 可查看当前上下文的变量 可观察当前函数调用堆栈 不侵入代码 可在暂停状态下执行指定代码 Inspector的构成以及原理 ...
- MyBatis之MyBatis Generator逆向工程
官网地址 http://mybatis.org/generator/ 下载地址 http://central.maven.org/maven2/org/mybatis/generator/mybati ...
- 洛谷 P2254 [NOI2005]瑰丽华尔兹(单调栈优化DP)
题目描述 不妨认为舞厅是一个N行M列的矩阵,矩阵中的某些方格上堆放了一些家具,其他的则是空地.钢琴可以在空地上滑动,但不能撞上家具或滑出舞厅,否则会损坏钢琴和家具,引来难缠的船长.每个时刻,钢琴都会随 ...
- UVA-136Ugly numbers
Ugly numbers are numbers whose only prime factors are 2, 3 or 5. The sequence 1, 2, 3, 4, 5, 6, 8, 9 ...