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