你好世界
  • 入门
  • 框架
  • Webpack
  • 模式
  • 知识点
  • 面试题
  • Koa
  • Java
  • Python
  • MongoDB
  • Redis
  • Algorithm
  • AI 概述
  • 机器学习
  • 深度学习
  • 自然语言处理
  • 关键词说明
  • 使用技巧
  • 本地模型安装及下载
  • 调试
  • 测试
  • GIT
  • Network
  • Linux
  • VSCode
  • GitHub
  • Mock
  • 入门
  • 框架
  • Webpack
  • 模式
  • 知识点
  • 面试题
  • Koa
  • Java
  • Python
  • MongoDB
  • Redis
  • Algorithm
  • AI 概述
  • 机器学习
  • 深度学习
  • 自然语言处理
  • 关键词说明
  • 使用技巧
  • 本地模型安装及下载
  • 调试
  • 测试
  • GIT
  • Network
  • Linux
  • VSCode
  • GitHub
  • Mock
  • Vue

    • Vue
    • 选项-数据
    • 选项-生命周期钩子
    • 实例方法-事件
    • 实例方法-生命周期
    • 指令
    • 模板编译
    • 渲染和更新
    • VueRouter
  • React

    • React
    • 环境构建
    • HOC开发模式
    • Hook
    • Redux
    • Nextjs 文档

HOC开发模式

用于将一些通用功能,代码复用

接收组件作为参数并返回新的组件

react-redux 库里的 connect 函数就是一个HOC模式的函数

示例
  1. 定义 test-hoc.js 文件
export default (Comp) => {
  function TestHocComp({ Component, pageProps, ...rest }) {
    console.log("testHoc: ", Component, pageProps);

    if (pageProps) {
      pageProps.test = "123";
    }

    return <Comp Component={Component} pageProps={pageProps} {...rest}></Comp>;
  }
  // TestHocComp.getInitialProps = Comp.getInitialProps;
  return TestHocComp;
};
  1. 使用
// _app.js
import TestHocComp from '../lib/test-hoc'

// **************************************

export default TestHocComp(MyApp);

最后更新时间: 2/27/22, 3:33 PM
贡献者: DESKTOP-ER5718D\zt
Prev
环境构建
Next
Hook