React: 高阶组件(HOC)

一、简介

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

二、使用

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

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

//1、封装一个列表组件,将展示的逻辑封装起来
const ListComponent = ({data, selected=""}) =>
    <select className="list" defaultValue={selected} style={{fontSize:20,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:20,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、演示截图

 

原文地址:https://www.cnblogs.com/XYQ-208910/p/12059196.html

时间: 2024-11-01 16:57:51

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

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

使用 react已经有不短的时间了,最近看到关于 react高阶组件的一篇文章,看了之后顿时眼前一亮,对于我这种还在新手村晃荡.一切朝着打怪升级看齐的小喽啰来说,像这种难度不是太高同时门槛也不是那么低的东西如今可不多见了啊,是个不可多得的 zhuangbility的利器,自然不可轻易错过,遂深入了解了一番. 概述 高阶组件的定义 React 官网上对高阶组件的定义: 高阶部件是一种用于复用组件逻辑的高级技术,它并不是 React API的一部分,而是从React 演化而来的一种模式. 具体地说,

react高阶组件的理解

[高阶组件和函数式编程] function hello() { console.log('hello jason'); } function WrapperHello(fn) { return function() { console.log('before say hello'); fn(); console.log('after say hello'); } } // hello 这时候等于 WrapperHello函数中返回的 匿名函数 // 在设计模式中这种操作叫做 装饰器模式 // 高

react 高阶组件之小学版

高阶组件  多么高大上的概念,一般用来实现组件逻辑的抽象和复用,在很多三方库(redux)中都被使用到,但是开发普通有任务项目时,如果能合理使用高阶组件,也会显著的提高代码质量. 我们今天就用最简单的逻辑来搞一搞这个家伙 我们先看一个栗子,看看这个家伙是如何进行逻辑复用的: 现在有一个组件MyComponent,需要从LocalStorage中获取数据, 然后渲染到界面. 一般情况下,我们可以这样实现: 代码很简单,但当其他组件也需要从LocalStorage中获取同样的数据展示出来时,每个组件

高阶函数HOF和高阶组件HOC(Higher Order Func/Comp)

一.什么是高阶函数(组件),作用是什么? 子类使用父类的方法可以通过继承的方式实现,那无关联组件通信(redux).父类使用子类方法(反向继承)呢 为了解决类(函数)功能交叉/功能复用等问题,通过传入类/函数返回类/函数(继承)的方式使得类拥有自身未定义的方法. 例如react-redux的connect方法使用了高阶组件: React Redux的connect: const HOC = connnect(mapStateToProps)(Comp); // connect为柯里化函数 实际为

react:高阶组件wrappedComponent

什么是高阶组件? 高阶部件是一种用于复用组件逻辑的高级技术,它并不是 React API的一部分,而是从React 演化而来的一种模式. 具体地说,高阶组件就是一个接收一个组件并返回另外一个新组件的函数! 解决什么问题? 随着项目越来越复杂,开发过程中,多个组件需要某个功能,而且这个功能和页面并没有关系,所以也不能简单的抽取成一个新的组件,但是如果让同样的逻辑在各个组件里各自实现,无疑会导致重复的代码.比如页面有三种弹窗一个有title,一个没有,一个又有右上角关闭按钮,除此之外别无它样,你总不

react高阶组件

高阶函数基本概念: 函数可以作为参数被传递, 函数可以作为返回值输出 高阶组件的基本概念: 高阶组件就是接受一个组件作为参数并返回一个新组件的函数 高级组件是一个函数,并不是组件 代理方式的高阶组件:返回的新组件类直接继承自React.Component类.新组件扮演的角色传入参数组件的一个代理,在新组件的render函数中,将被包裹组件渲染出来,除了高阶组件自己要做得工作,其余功能全都转手给了包裹的组件 代理方式的高阶组件用途: 1--操作prop         2--访问ref    3-

之间的区别是什么高阶组件(HOC)和继承反应本地组件

我从.net背景,反应新本地 这里的问题是如何的不同于继承与基地哦概念通过父类属性和儿童扩展基础和使用状态,从基类属性和基本方法. 这是最好的方法来实现父- >子- >孙子在反应组件.层次关系吗? 例如: Parent.js看起来像 class Parent extends Component{constructor(props){super(props);this.state = {value: "Parent",BaseText: "Inheritance E

React HOC(高阶组件)

一.定义 高阶函数:函数接受函数作为输入,或者输出一个函数. 高阶组件:接受React组件作为输入,或是输出一个组件.即hocFactory:: W: React.Component => E: React.Component 高阶组件让代码更有复用性.逻辑性.抽象性. 二.实现高阶函数的三种方法. 1. 属性继承??(将Input组件的name,onChange方法提取到高阶组件中) const Mycontainer = (WrappedComponent) => { class exte

【转】react的高阶组件

前言 本文代码浅显易懂,思想深入实用.此属于react进阶用法,如果你还不了解react,建议从文档开始看起. 我们都知道高阶函数是什么, 高阶组件其实是差不多的用法,只不过传入的参数变成了react组件,并返回一个新的组件. A higher-order component is a function that takes a component and returns a new component. 形如: const EnhancedComponent = higherOrderComp