在React官网文档学习React HOC,整个看了一遍还是云里雾里的,于是按照官网文档,自己动手实践一下。官网地址:React 高阶组件

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

使用高阶组件(HOC)解决交叉问题

假设有两个组件,CommentList组件从外部数据源订阅数据并渲染评论列表,BlogPost组件是一个订阅单个博客文章的组件,该组件遵循类似的模式,即在componentDidMount中添加事件处理函数订阅数据,在componentWillUnmount中清除事件处理函数,两个组件的事件处理函数内容相同。两个组件的区别在于:从数据源订阅的数据不同,并且渲染格式不同。(代码见React官网)

由此,可以将两个组件中相同的逻辑部分提取到一个高阶组件,该高阶组件能够创建类似 CommonList 和 BlogPost 从数据源订阅数据的组件 。该组件接受一个子组件作为其中的一个参数,并从数据源订阅数据作为props属性传入子组件。该高阶组件命名为WithSubscription。

import DataSource from '../DataSource'
let withSubscription = (WrappedComponent, selectData) => {
// ……返回另一个新组件……
return class extends React.Component {
constructor(props) {
super(props);
this.handleChange = this.handleChange.bind(this);
this.state = {
data: selectData(DataSource, props)
};
} componentDidMount() {
// ……注意订阅数据……
DataSource.addChangeListener(this.handleChange);
} componentWillUnmount() {
DataSource.removeChangeListener(this.handleChange);
} handleChange() {
this.setState({
data: selectData(DataSource, this.props)
});
}
render() {
// ……使用最新的数据渲染组件
// 注意此处将已有的props属性传递给原组件
const style = {
'marginBottom':'30px'
}
return(
<div style={style}>
<div>This is a HOC Component...</div>
<WrappedComponent data={this.state.data} {...this.props} />
</div>
);
}
};
}
export default withSubscription;

高阶组件既不会修改原组件,也不会使用继承复制原组件的行为。相反,高阶组件是通过将原组件包裹(wrapping)在容器组件(container component)里面的方式来组合(composes) 使用原组件。高阶组件就是一个没有副作用的纯函数。

高阶组件接收容器组件的所有props属性以及一个新的 data属性,并将从数据源订阅的数据用 data 属性渲染输出内容。高阶组件并不关心数据是如何以及为什么被使用,而被包裹组件也不关心数据来自何处。

高阶组件使用

./pages/index.js
import React from 'react'
import HOCList from '../components/HOCList';
import CommentList from '../components/CommentList';
import BlogPost from '../components/BlogPost';
import withSubscription from '../components/WithSubscription/index' const CommentListWithSubscription = withSubscription(
CommentList,
(DataSource) => DataSource.getComments()
); const BlogPostWithSubscription = withSubscription(
BlogPost,
(DataSource, props) => DataSource.getBlogPost(props.id)
);
export default class extends React.Component {
constructor(props) {
super(props);
}
componentDidMount() {
} render() {
const style = {
width:'100%',
'text-align': 'center',
title:{
color:'red'
}
}
return (
<div style={style}>
<h1 style={style.title}>hello hoc</h1>
<CommentListWithSubscription />
<BlogPostWithSubscription />
</div>
);
}
}

CommentListWithSubscription的第一个参数是包裹组件(wrapped component),第二个参数会从 DataSource和当前props即高阶组件的props属性中检索需要的数据。

当 CommentListWithSubscription 和 BlogPostWithSubscription 渲染时, 会向CommentList 和 BlogPost 传递一个 data props属性,该 data属性的数据包含了从 DataSource 检索的最新数据。

官网的示例代码不完全,为了更好地看到运行结果,对代码做一些修改:

  • 另外创建数据源DataSource:
./components/DataSource.js
let DataSource = {
getComments: () => {
return [
'comment1', 'comment2', 'comment3'
]
},
getBlogPost: () => {
return 'BlogPost Contents';
},
addChangeListener: () => { console.log('addChangeListener') },
removeChangeListener: () => { console.log('removeChangeListener') },
}
export default DataSource;
  • 两个被包裹组件只负责对数据源的展示:
//.components/BlogPost/index.js
import React from 'react'
import { Input,Button } from 'antd' const { TextArea } = Input;
export default class extends React.Component {
render() {
return (
<div>
<TextArea value={this.props.data} />
</div>
);
}
}
//.components/BlogPCommentListst/index.js
import React from 'react' export default class extends React.Component {
render() {
return (
<div>
{this.props.data.map((value) => (
<div comment={value} key={value} >{value}</div>
))}
</div>
);
}
}

运行结果:http://localhost:3000/

完整源码地址:https://github.com/wuhuaranran/myHOC

React HOC的更多相关文章

  1. React HOC(高阶组件)

    一.定义 高阶函数:函数接受函数作为输入,或者输出一个函数. 高阶组件:接受React组件作为输入,或是输出一个组件.即hocFactory:: W: React.Component => E: ...

  2. 高阶组件 HOC

    一. A higher-order component (HOC) is an advanced technique in React for reusing component logic. a h ...

  3. React Hooks 实现react-redux

    Redux 是目前 React 系统中最常用的数据管理工具,它落实并发扬了 Flux 的数据单向流动模式,被实践证明为一种成熟可用的模式. 尽管承受着一些非议,Redux 在 React 数据管理界的 ...

  4. React Hooks总结

    Hook 前言 什么是Hook 自从 16.8 版本开始,hooks 的出现使得你可以在不编写 class 的情况下使用状态管理以及其它 React 的特性. 那么在 React Hooks 出现之前 ...

  5. 如何实现Ant design表单组件封装?

    目标:自己实现一个antd表单组件 先看下Ant Design官网上给出的表单组件用法: import React, { Component } from 'react' import { Form, ...

  6. 从 0 到 1 实现 React 系列 —— 5.PureComponent 实现 && HOC 探幽

    本系列文章在实现一个 cpreact 的同时帮助大家理顺 React 框架的核心内容(JSX/虚拟DOM/组件/生命周期/diff算法/setState/PureComponent/HOC/...) ...

  7. react中的hoc和修饰器@connect结合使用

    在学习react-redux的时候,看到了修饰器这个新的属性,这个是es7的提案属性,很方便.于是我用@connect代替了connect(使用的时候需要配置,这里不赘述),省去了很多不必要的代码,但 ...

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

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

  9. 可复用 React 的 HOC 以及的 Render Props

    重复是不可能的,这辈子都不可能写重复的代码 当然,这句话分分钟都要被产品(领导)打脸,真的最后一次改需求,我们烦恼于频繁修改的需求 虽然我们不能改变别人,但我们却可以尝试去做的更好,我们需要抽象,封装 ...

随机推荐

  1. 用strace排查故障的5种简单方法(每日一译)

    原文链接:5 simple ways to troubleshoot using Strace 我很意外大部分人都不知道如何使用strace.strace一直是我的首选debug工具,因为它非常的有效 ...

  2. php 转义html标签 反转html标签 符号

    $a = '<strong>123</strong>';     //假设这是html代码$b =  htmlspecialchars($a);          //将< ...

  3. LDAP Browser/Editor v2.8.2

    https://www.netiq.com/communities/cool-solutions/wp-content/uploads/sites/2/2009/07/Gawor_ldapbrowse ...

  4. WordPress通过插件发送邮件

    原文发表自我的个人站点,欢迎大家訪问~转载请保留本段,或注明原文链接:http://www.hainter.com/wordpress-send-email-via-plugins WordPress ...

  5. Java NIO学习笔记之基本概念

    一.缓冲区操作 缓冲区,以及缓冲区如何工作,是所有 I/O 的基础.所谓"输入/输出"讲的无非就是把数据移进或移出缓冲区. 进程使用 read( )系统调用,要求其缓冲区被填满.内 ...

  6. Dynamips GNS3

    https://baike.baidu.com/item/dynamips Dynamips的原始名称为Cisco 7200 Simulator,源于Christophe Fillot在2005年8月 ...

  7. OpenGL核心之视差映射

    笔者介绍:姜雪伟,IT公司技术合伙人.IT高级讲师,CSDN社区专家,特邀编辑.畅销书作者;已出版书籍:<手把手教你¯的纹理坐标偏移T3来对fragment的纹理坐标进行位移.你能够看到随着深度 ...

  8. Android 离线缓存的高速实现

    离线缓存是指在有网络的状态下将从server获取的网络数据.如Json 数据缓存到本地,在断网的状态下启动APP时读取本地缓存数据显示在界面上,经常使用的APP(网易新闻.知乎等等)都是支持离线缓存的 ...

  9. CF 559B(Equivalent Strings-构造法)

    B. Equivalent Strings time limit per test 2 seconds memory limit per test 256 megabytes input standa ...

  10. 微信公众号开发之怎样将本机IP映射成外网域名

    近期一个项目须要用到微信公众号的网页授权登录,在研究这个公众号的时候遇到各种困难,现将自己的一些心得总结一下. 我想进行微信公众号开发遇到的第一个困难就是微信公众号必须输入一个外网能够訪问的域名,在网 ...