React高阶组件(HOC)入门示例

2019-01-12 admin

什么是高阶组件?

简称:HOC

全称:High Order Component

高阶组件其实不是什么高深莫测的东西,它类似于高阶函数,就是一个纯函数,它会接受一个组件作为参数,然后返回一个新的组件。

什么时候使用HOC?

在React中,组件是代码复用的主要单元。但是业务开发过程中难免会遇到一些个性化的需求,此时如果再去重新开发一个组件,会让后续的维护成本变高。

接下来举一个简单的例子说明

假设有需求如下

  • v1.0:页面上显示10行’hello, world!’
  • v2.0:页面上要多加10行‘HELLO,WORLD!’

要实现上述的需求,第一个版本会写一个显示hello,world!的组件,这个没有问题。第二个版本可以选择写一个显示HELLO,WORLD!的组件,或者在第一个组件的基础上包装一下,只给第一个组件返回的数据做一个转成大写的处理。

我用HOC的方式写一下示例代码,很快就能明白

v1.0的组件示例代码如下:

class HelloWorld extends React.Component {
  render() {
    return "hello,world!"
  }
}

ReactDOM.render(<HelloWorld />, document.querySelector("#root"))

v2.0的组件示例代码如下:

// HOC函数,实现v2.0版本的需求
export const toUpperCaseHoc = function(WrappedComponent) {
  return class Hoc extends React.Component {
    render() {
      const { text } = this.props;
      const text2Upper = text.toUpperCase();
      return <WrappedComponent text={text2Upper} />;
    }
  };
};

// v1.0版本实现的组件
export class HelloWorld extends React.Component {
  render() {
    return this.props.text;
  }
}

// 用HOC包装后生成的新的组件,符合v2.0版本的需求,同时包含了v1.0的其它功能
const HelloWorld2Upper = toUpperCaseHoc(HelloWorld);

ReactDOM.render(<HelloWorld2Upper text="hello,world!" />, document.querySelector('#root'));

总结

业务开发中可能会有一些功能大部分逻辑相似,部分个性化,这个时候可以考虑一下是不是可以开发一个基础组件,在基础组件的基础上去增加一些个性化的需求。

最后,一个HOC最好只做一件事。

可以参考:React官方高阶组件相关文档

原文链接:https://segmentfault.com/a/1190000017866545

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-50835.html

文章标题:React高阶组件(HOC)入门示例

相关文章
详解angular2封装material2对话框组件
1. 说明 angular-material2自身文档不详,控件不齐,使用上造成了很大的障碍。这里提供一个方案用于封装我们最常用的alert和confirm组件。 2. 官方使用方法之alert ①编写alert内容组件 @Componen...
2017-03-13
Ajax入门手册chm
下载地址:Ajax入门手册chm ...
2015-11-12
bootstrap——bootstrapTable实现隐藏列的示例
最近在学习bootstrap,正好今天看到了bootstrapTable隐藏列,留着以后参考。 主要代码: &lt;script type=&quot;text&#x2F;javascript&quot;&gt; $(functi...
2017-03-09
[翻译]基于Webpack4使用懒加载分离打包React代码
原文地址:https://engineering.innovid.com/code-splitting-using-lazy-loading-with-react-redux-typescript-and-webpack-4-3ec601...
2018-03-11
JS实现的验证身份证及获取地区功能示例
本文实例讲述了JS实现的验证身份证及获取地区功能。分享给大家供大家参考,具体如下: 这里的代码可以用来验证身份证号,并且根据身份证号来判断是哪个省份及性别 代码示例: &lt;head &gt; &lt;title&gt;&lt;&#x...
2017-03-08
Vue 短信验证码组件开发详解
Vue.js(读音 /vjuː/, 类似于 view)是一个构建数据驱动的 web 界面的库。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。 Vue.js 自身不是一个全能框架——它只聚焦于视图层。因此...
2017-03-17
vuejs2.0实现分页组件使用$emit进行事件监听数据传递的方法
如果我有几个页面都需要有分页效果,不可能每个页面都去复制一下这段代码吧,意思是封装一下,变成通用的组件。 首先使用基础 Vue 构造器,创建一个“子类”,Vue.extend( options ) var barHtml = &#x27;&...
2017-03-15
基于Marquee.js插件实现的跑马灯效果示例
本文实例讲述了基于Marquee.js插件实现的跑马灯效果。分享给大家供大家参考,具体如下: 1、Marquee.js文件 &#x2F;****************************************************...
2017-02-17
bootstrap实现的自适应页面简单应用示例
本文实例讲述了bootstrap实现的自适应页面简单应用。分享给大家供大家参考,具体如下: &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset=&#x27;u...
2017-03-14
VSCode配置react开发环境的步骤
vscode 默认配置对于 react 的 JSX 语法不友好,体现在使用自动格式化或者粘贴后默认缩进错误,尽管可以通过改变 language mode 缓解错误,但更改 language mode 后的格式化依然不够理想。 通过搭配使用 ...
2017-12-28
回到顶部