目 录CONTENT

文章目录

react中高阶组件

Administrator
2021-04-08 / 0 评论 / 0 点赞 / 5309 阅读 / 3291 字

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;

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

  1. 本质是一个函数,这个函数接收一个组件做为参数
  2. 这个函数返回一个新的组件

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

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,后期我们可以通过这个插件去完成我们的功能

0

评论区