react中高阶组件-杨标的博客

react中高阶组件

高阶组件（HOC）是 React 中用于复用组件逻辑的一种高级技巧。HOC 自身不是 React API 的一部分，它是一种基于 React 的组合特性而形成的设计模式

具体而言，高阶组件是参数为组件，返回值为新组件的函数。

What ？什么是HOC

HOC（High Order Component）是 react 中对组件逻辑复用部分进行抽离的高级技术，但HOC并不是一个 React API 。它只是一种设计模式，类似于装饰器模式。
具体而言，HOC就是一个函数，且该函数接受一个组件作为参数，并返回一个新组件。
从结果论来说，HOC相当于 Vue 中的 mixins(混合) 。其实 React 之前的策略也是采用 mixins ，但是后来 facebook 意识到 mixins 产生的问题要比带来的价值大，所以移除了 mixins

什么地方用到了HOC

在刚刚我们在使用路由的配置文件的时候，我们其实已经有一个问题了，我们所有的组件都是直接import导入的，那么，它能不能像vue-router一样，使用()=>import()按需加载呢

针对这个问题，我们就可以使用HOC来完成

import React from "react";

// 高阶组件本质上面是一个函数，然后这个函数再返回一个组件
// 高阶组件的参数也为组件
function asyncComponent(importCompoennt){
    class LazyComponent extends React.Component{

    }

    return LazyComponent;
}

export default asyncComponent;

上面就是一个高阶组件最简单的写法，高阶组件的写法必须满足两个条件

本质是一个函数，这个函数接收一个组件做为参数
这个函数返回一个新的组件

我们现在继续去完成刚刚的高阶组件，以实现路由当中的页面按需加载

import React from "react";

// 高阶组件本质上面是一个函数，然后这个函数再返回一个组件
// 高阶组件的参数也为组件
// 这个时候的importComponent 就是 () => import("../views/Home/Home.js")
function asyncComponent(importCompoennt) {
    class LazyComponent extends React.Component {
        constructor() {
            super(...arguments);
            this.state = {
                component: null
            }
        }
        //我会在这个组件挂载的时候，去加载我所真正要加载的组件
        // 这个相当于vue的mouted()生命周期钩子函数
        componentDidMount() {
            importCompoennt().then(mod => {
                this.setState({
                    component: mod.default ? mod.default : mod
                });
            })
        }
        render() {
            let C = this.state.component;
            return C ? <C {...this.props}></C> : null
        }
    }
    return LazyComponent;
}

export default asyncComponent;

当完成我们上面的操作过程以后，我们就可以在routes.js里面，去加载异步组件了


import asyncComponent from "../components/asyncComponent/asyncComponent";

const routes = [
    {
        name: "Home",
        path: "/Home",
        component: asyncComponent(() => import("../views/Home/Home.js")),
        children: [
            {
                name: "ChooseFood",
                path: "/Home/ChooseFood",
                component: asyncComponent(() => import("../views/ChooseFood/ChooseFood"))
            }, {
                name: "Order",
                path: "/Home/Order",
                component: asyncComponent(() => import("../views/Order/Order"))
            }
        ]
    }, {
        name: "Detail",
        path: "/Detail",
        component: asyncComponent(() => import("../views/Detail/Detail"))
    }
]
export default routes;

扩展点：

上面的asyncComponent这个高阶组件是我自己封闭的，用于完成按需加载的功能，但是网上npm里面有一个现成的工具也可以实现，这个插件叫react-loadable,后期我们可以通过这个插件去完成我们的功能

目录CONTENT

react中高阶组件