七进七出React高阶组件

miguel.jiang 发布于2019-08-21 17:21 / 2767人阅读

摘要：为了提高代码的复用性和可维护性，高阶函数应运而生。使用过的同学，不知道有没有使用过，高阶函数的作用和它是一样的。高阶函数在编程中扮演的角色就是火锅锅底的角色，它有公用的方法和属性，而各种组件就是肉和蔬菜。

为什么要使用高阶组件？

想想以前用原生和jQuery的项目，上千行的code映入眼帘，瞬间有种昏死过去的冲动。代码难以维护，改一个bug可能出现N个bug，真的是很痛苦。于是乎组件化成为了当前前端开发的主流技术。angular、vue和react很好的帮我们实现了组件化。

但是我们常常也会遇到一种情况，就是两个组件往往有很多的重复代码(可能是相同的属性，也可能是相同的方法)。例如，在登录和注册组件中，都会有用户名和密码，以及对他们的校验规则。为了提高代码的复用性和可维护性，React高阶函数应运而生。

React之前对此的解决方案是mixin，但这造成和很多不必要的问题，后来就被废弃掉了。使用过vue的同学，不知道有没有使用过mixin，react高阶函数的作用和它是一样的。

高阶组件到底是个什么东西？

高阶组件其实是一个函数，它并不是一个组件，我们需要向它传递一些参数(想要操作的组件、属性)。这么说起来它其实一点也不高阶，它的作用就是存储一些公共的属性和方法。

我们经常几个人吃过一个锅底的那种火锅，锅底里有火锅底料和各种佐料，我们把肉和蔬菜等放进去涮一下，就可以美美的饱餐一顿。高阶函数在react编程中扮演的角色就是火锅锅底的角色，它有公用的方法和属性，而各种组件就是肉和蔬菜。如果是一个人一个锅的火锅就像没有经过封装的code，代码量重复且维护困难。

如何实现高阶函数？

我们先来看一段可以使用高阶函数的代码:

</>复制代码 
这里有一个Second组件，它负责展示用户名username

</>复制代码 
export class Second extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            username: ""
        }
    }
    componentWillMount() {
        let username = localStorage.getItem("username");
        this.setState({
            username: username
        });
    }
    render() {
        return(
            
                Second Page
                Hi {this.state.username}
            
        )
    }
}

</>复制代码 
下面是一个Third组件，它也负责展示用户名

</>复制代码 
export class Third extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            username: ""
        }
    }
    componentWillMount() {
        let username = localStorage.getItem("username");
        this.setState({
            username: username
        });
    }
    render() {
        return(
            
                Third Page
                Hi {this.state.username}
                我今年18岁了
            
        )
    }
}

我们看到这两个组件除了名称以外，其余大量的代码是一样的，我们完全可以考虑将它们通用的代码提取出来。下面就是高阶组件出场的时候了。

高阶组件可以写成这样

</>复制代码 
export const HighOrderComponent = (WrapComponent, title) => {
    return class HOC extends React.Component {
        constructor(props) {
            super(props);
            this.state = {
                username: ""
            }
        }
        componentWillMount() {
            let username = localStorage.getItem("username");
            this.setState({
                username: username
            });
        }
        static displayName = `HOC(${getDisplayName(WrapComponent)})`;
        render() {
            return(
                
                    {title}
                    
                
            )
        }
    }
}

WrapComponent 是我们要操作的组件

title 是它们的标题参数

username 就是我们常用的props，它负责向组件传递值，我们下面还会提到

使用高阶组件之后我们要对Second和Third组件进行修改，修改如下

</>复制代码 
class Second extends React.Component {
    render() {
        return(
            
                Hi {this.props.username}
                晓不晓得哪里好耍
            
        )
    }
}
export const HighOrderSecond = HighOrderComponent(Second, "Second Page");

</>复制代码 
class Third extends React.Component {
    render() {
        return(
            
                Hi {this.props.username}
            
        )
    }
}
export const HighOrderThird = HighOrderComponent(Third, "Third Page");

很多同学可能会问，export出去的常量是干什么用的，它就是高阶组件对组件进行封装之后的一个全新的组件，是两者的结合。到此，我们在其它页面引用组件就不再是引用Second和Third组件了，要引用的就是HighOrderSecond和HighOrderThird了。

细心的同学可能会发现一些不同的地方，对于Second和Third的公共legend提取出去了，但并没有将h2对应得标题提取出去，这里只是想给大家说一下，在对组件使用高阶组件包裹之后，高阶组件就变成了组件的父组件，它的state可以通过props的方式向子组件传递，username就是这样。我们在chrome的react插件中可以观察到这一点

HOC已经将Second组件包裹起来，成为了它的父组件，它上面的match和location是我使用了react-router的缘故，我们可以不用去管它。它的state——username作为props传给了Second

今天给大家简单的介绍了React高阶组件的一些知识，后续还会再深入的挖掘React高阶组件的知识和大家分享，希望对大家有帮助。文章转自个人掘金账号，转载请注明出处，谢谢

GPU云服务器云服务器七进七出高阶组件高阶函数高阶

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/89412.html

React 深入系列6：高阶组件

摘要：在项目中用好高阶组件，可以显著提高代码质量。高阶组件的定义类比于高阶函数的定义。高阶函数接收函数作为参数，并且返回值也是一个函数。 React 深入系列，深入讲解了React中的重点概念、特性和模式等，旨在帮助大家加深对React的理解，以及在项目中更加灵活地使用React。 1. 基本概念高阶组件是React 中一个很重要且比较复杂的概念，高阶组件在很多第三方库（如Redux）中都...

2shou 2019-08-22 17:28 评论0 收藏0
深入浅出React高阶组件

摘要：博客地址背景知识在开始讲述高阶组件前，我们先来回顾高阶函数的定义接收函数作为输入，或者输出另一个函数的一类函数，被称作高阶函数。博客地址：http://www.luckyjing.com/post... 背景知识在开始讲述高阶组件前，我们先来回顾高阶函数的定义：接收函数作为输入，或者输出另一个函数的一类函数，被称作高阶函数。对于高阶组件，它描述的便是接受React组件作为输入，输出...

yuanzhanghu 2019-08-20 18:20 评论0 收藏0
React高阶组件

摘要：结语高阶函数对于初学者来说可能不太好理解，但当你深入其中，了解其中的原理之后，我们可以使用高阶函数来完成很多的工作。前段时间在工作中写Hybrid页面时遇到了这样的一个场景，公司需要一系列的活动组件，在每个组件注册的时候都需要调用App端提供的一个接口。一开始也考虑了几种方式，包括mixin、组件继承以及react高阶组件。但经过了种种衡量，最后选择使用了高阶组件的做法。 1、Mix...

ThinkSNS 2019-08-22 15:47 评论0 收藏0
从零开始学习 React 高阶组件

01、介绍 React 高阶组件也叫做 React HOC(High Order Component), 它是react中的高级技术, 用来重用组件逻辑。但高阶组件本身并不是React API。它只是一种模式，这种模式是由react自身的组合性质必然产生的。那么在学习高阶组件之前有一个概念我们必须清楚，就是高阶函数。 02、高阶函数概念：高阶函数是一个函数，它接收函数作为参数或将函数作...

_Dreams 2019-08-23 16:19 评论0 收藏0
React高阶组件

摘要：高阶组件高阶函数接收函数作为输入，或者输出另一个函数的一类函数高阶组件接收组件作为输入，输出一个新的组件的组件。包含了一系列实用的高阶组件库拖动库深入理解高阶组件其中详细介绍了属性代理和反向继承的区别。 React高阶组件高阶函数：接收函数作为输入，或者输出另一个函数的一类函数；高阶组件：接收React组件作为输入，输出一个新的React组件的组件。高阶组件通过包裹一个新传入...

cncoder 2019-08-26 13:35 评论0 收藏0