说说对React高阶组件的理解?应用场景?

面试官:说说对高阶组件的理解?应用场景?

一、是什么

高阶函数(Higher-order function),至少满足下列一个条件的函数

  • 接受一个或多个函数作为输入
  • 输出一个函数

React中,高阶组件即接受一个或多个组件作为参数并且返回一个组件,本质也就是一个函数,并不是一个组件

const EnhancedComponent = highOrderComponent(WrappedComponent);

上述代码中,该函数接受一个组件WrappedComponent作为参数,返回加工过的新组件EnhancedComponent

高阶组件的这种实现方式,本质上是一个装饰者设计模式

二、如何编写

最基本的高阶组件的编写模板如下:

import React, { Component } from 'react';

export default (WrappedComponent) => {
  return class EnhancedComponent extends Component {
    // do something
    render() {
      return <WrappedComponent />;
    }
  }
}

通过对传入的原始组件 WrappedComponent 做一些你想要的操作(比如操作 props,提取 state,给原始组件包裹其他元素等),从而加工出想要的组件 EnhancedComponent

把通用的逻辑放在高阶组件中,对组件实现一致的处理,从而实现代码的复用

所以,高阶组件的主要功能是封装并分离组件的通用逻辑,让通用逻辑在组件间更好地被复用

但在使用高阶组件的同时,一般遵循一些约定,如下:

  • props 保持一致
  • 你不能在函数式(无状态)组件上使用 ref 属性,因为它没有实例
  • 不要以任何方式改变原始组件 WrappedComponent
  • 透传不相关 props 属性给被包裹的组件 WrappedComponent
  • 不要再 render() 方法中使用高阶组件
  • 使用 compose 组合高阶组件
  • 包装显示名字以便于调试

这里需要注意的是,高阶组件可以传递所有的props,但是不能传递ref

如果向一个高阶组件添加refe引用,那么ref 指向的是最外层容器组件实例的,而不是被包裹的组件,如果需要传递refs的话,则使用React.forwardRef,如下:

function withLogging(WrappedComponent) {
    class Enhance extends WrappedComponent {
        componentWillReceiveProps() {
            console.log('Current props', this.props);
            console.log('Next props', nextProps);
        }
        render() {
            const {forwardedRef, ...rest} = this.props;
            // 把 forwardedRef 赋值给 ref
            return <WrappedComponent {...rest} ref={forwardedRef} />;
        }
    };

    // React.forwardRef 方法会传入 props 和 ref 两个参数给其回调函数
    // 所以这边的 ref 是由 React.forwardRef 提供的
    function forwardRef(props, ref) {
        return <Enhance {...props} forwardRef={ref} />
    }

    return React.forwardRef(forwardRef);
}
const EnhancedComponent = withLogging(SomeComponent);

三、应用场景

通过上面的了解,高阶组件能够提高代码的复用性和灵活性,在实际应用中,常常用于与核心业务无关但又在多个模块使用的功能,如权限控制、日志记录、数据校验、异常处理、统计上报等

举个例子,存在一个组件,需要从缓存中获取数据,然后渲染。一般情况,我们会如下编写:

import React, { Component } from 'react'

class MyComponent extends Component {

  componentWillMount() {
      let data = localStorage.getItem('data');
      this.setState({data});
  }
  
  render() {
    return <div>{this.state.data}</div>
  }
}

上述代码当然可以实现该功能,但是如果还有其他组件也有类似功能的时候,每个组件都需要重复写componentWillMount中的代码,这明显是冗杂的

下面就可以通过高价组件来进行改写,如下:

import React, { Component } from 'react'

function withPersistentData(WrappedComponent) {
  return class extends Component {
    componentWillMount() {
      let data = localStorage.getItem('data');
        this.setState({data});
    }
    
    render() {
      // 通过{...this.props} 把传递给当前组件的属性继续传递给被包装的组件WrappedComponent
      return <WrappedComponent data={this.state.data} {...this.props} />
    }
  }
}

class MyComponent2 extends Component {  
  render() {
    return <div>{this.props.data}</div>
  }
}

const MyComponentWithPersistentData = withPersistentData(MyComponent2)

再比如组件渲染性能监控,如下:

class Home extends React.Component {
    render() {
        return (<h1>Hello World.</h1>);
    }
}
function withTiming(WrappedComponent) {
    return class extends WrappedComponent {
        constructor(props) {
            super(props);
            this.start = 0;
            this.end = 0;
        }
        componentWillMount() {
            super.componentWillMount && super.componentWillMount();
            this.start = Date.now();
        }
        componentDidMount() {
            super.componentDidMount && super.componentDidMount();
            this.end = Date.now();
            console.log(`${WrappedComponent.name} 组件渲染时间为 ${this.end - this.start} ms`);
        }
        render() {
            return super.render();
        }
    };
}

export default withTiming(Home);

参考文献

  • https://whyta.cn/post/8d761f218aa9/
  • https://zh-hans.reactjs.org/docs/higher-order-components.html#gatsby-focus-wrapper
  • https://segmentfault.com/a/1190000010307650
  • https://zhuanlan.zhihu.com/p/61711492

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/246602.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

C# WPF上位机开发(键盘绘图控制)

【 声明&#xff1a;版权所有&#xff0c;欢迎转载&#xff0c;请勿用于商业用途。 联系信箱&#xff1a;feixiaoxing 163.com】 在软件开发中&#xff0c;如果存在canvas图像的话&#xff0c;一般有几种控制方法。一种是鼠标控制&#xff1b;一种是键盘控制&#xff1b;还有一…

玄关柜和鞋柜是一回事吗?福州中宅装饰,福州装修

玄关柜和鞋柜虽然都用于存放鞋子&#xff0c;但它们在概念上有所不同。玄关柜是一个更大的概念&#xff0c;它包括鞋柜和其他功能区域&#xff0c;可以说鞋柜是玄关柜的一部分。 1️⃣概念上的不同 玄关柜是一种集成了鞋柜、挂衣架、换鞋凳等多种功能于一体的家居家具&#xf…

忘记了路由器的用户名和密码,怎么办?

注意&#xff1a;登录窗口会显示路由器型号&#xff0c;请务必确认是您自己路由器的界面。 解决方法 尝试输入登录密码 如果您的确忘了设置好的密码&#xff0c;就只能把路由器恢复出厂设置&#xff0c;没有超级密码。 恢复出厂前&#xff0c;不妨尝试输入可能的管理密码。一…

【STM32】USART串口协议

1 通信接口 通信的目的&#xff1a;将一个设备的数据传送到另一个设备&#xff0c;扩展硬件系统 通信协议&#xff1a;制定通信的规则&#xff0c;通信双方按照协议规则进行数据收发 USRT&#xff1a;TX是数据发送引脚&#xff0c;RX是数据接受引脚&#xff1b; I2C&#xf…

数字孪生因何备受青睐?

数字孪生&#xff08;Digital Twin&#xff09;作为一个概念&#xff0c;正在不断引起各行各业的关注和迅速发展。它是一种将物理实体或系统与其数字化虚拟模型相结合的技术&#xff0c;为企业和组织提供了全新的可能性。下面我就以可视化设计从业者的角度来进行简单探讨。 数字…

坚鹏:美国智库认为中国在70%战略产业里领先,美国正迅速衰落

【重榜】2023年12月13日&#xff0c;美国智库信息技术与创新基金会&#xff08;ITIF&#xff09;发布重榜报告&#xff0c;认为中国在70%战略产业里领先&#xff0c;美国正迅速衰落。美国智库ITIF认为在计算机和电子产品、化工品、机器设备、机动车、基本金属、金属制品、电气设…

19.(vue3.x+vite)v-if和v-for哪个优先级更高

前端技术社区总目录(订阅之前请先查看该博客) v-if和v-for哪个优先级更高 (1)实践中不应该把v-for和v-if放一起,可以包一层template (2)在vue2中,v-for的优先级是高于v-if (3)在vue3中,v-for的优先级是低于v-if 组件代码 <template><div><!--包一…

React受控组件和非受控组件的理解?应用场景?

面试官&#xff1a;说说对受控组件和非受控组件的理解&#xff1f;应用场景&#xff1f; 一、受控组件 受控组件&#xff0c;简单来讲&#xff0c;就是受我们控制的组件&#xff0c;组件的状态全程响应外部数据 举个简单的例子&#xff1a; class TestComponent extends Rea…

arp欺骗原理以及实现方式

我们知道了arp的作用&#xff0c;那么此时我们怎么可以用他来进行攻击呢&#xff1f;在一个局域网中&#xff0c;我们怎么实现呢&#xff1f; 原理&#xff1a; 这样B就可以做到中间人了&#xff0c;可以接受到两个主机的数据了。换句话来说&#xff0c;在同一个局域网内&…

STM32 PVD掉电检测功能的使用方法

STM32 PVD掉电检测功能的使用方法 前言 在实际应用场景中&#xff0c;可能会出现设备电源电压异常下降或掉电的情况&#xff0c;因此&#xff0c;有时候需要检测设备是否掉电&#xff0c;或者在设备掉电的瞬间做一些紧急关机处理&#xff0c;比如保存重要的用户数据&#xff…

gRPC 一种现代、开源、高性能的远程过程调用 (RPC) 可以在任何地方运行的框架

背景介绍 gRPC 是一种现代开源高性能远程过程调用 &#xff08;RPC&#xff09; 可以在任何环境中运行的框架。它可以有效地连接服务 在数据中心内和数据中心之间&#xff0c;具有对负载平衡、跟踪、 运行状况检查和身份验证。它也适用于最后一英里 分布式计算&#xff0c;用于…

qt-C++笔记之addAction和addMenu的区别以及QAction的使用场景

qt-C笔记之addAction和addMenu的区别以及QAction的使用场景 code review! 文章目录 qt-C笔记之addAction和addMenu的区别以及QAction的使用场景1.QMenu和QMenuBar的关系与区别2.addMenu和addAction的使用场景区别3.将QAction的信号连接到槽函数4.QAction的使用场景5.将例1修改…

新能源汽车生产污废水需要哪些工艺及设备

新能源汽车的快速发展带来了许多环境问题&#xff0c;其中之一就是生产过程中产生的污废水。由于新能源汽车的生产过程与传统汽车有所不同&#xff0c;因此需要采用特定的工艺和设备来处理和处理这些废水。 首先&#xff0c;新能源汽车生产过程中产生的污废水主要来自洗涤和冷却…

【稳定检索|投稿优惠】2024年机电控制系统与机械工程国际会议(ICMECSME 2024)

2024年机电控制系统与机械工程国际会议(ICMECSME 2024) 2024 International Conference on Mechanical and Electrical Control Systems and Mechanical Engineering(ICMECSME) 一、【会议简介】 2024年智慧交通与城市建设工程国际会议(ICSTUCE 2024)将在中国广州盛大开幕。这场…

C语言——字符函数和字符串函数(二)

&#x1f4dd;前言&#xff1a; 上一篇文章C语言——字符函数和字符串函数&#xff08;一&#xff09;对字符函数和字符串函数strlen&#xff0c;strcpy和strncpy&#xff0c;strcat和strncat进行了初步的讲解 这篇文章主要再讲解几个我们常用到的其他字符串函数&#xff08;附…

2023-12-14 二叉树的最大深度和二叉树的最小深度以及完全二叉树的节点个数

二叉树的最大深度和二叉树的最小深度以及完全二叉树的节点个数 104. 二叉树的最大深度 思想&#xff1a;可以使用迭代法或者递归&#xff01;使用递归更好&#xff0c;帮助理解递归思路&#xff01;明确递归三部曲–①确定参数以及返回参数 ②递归结束条件 ③单层逻辑是怎么样…

JavaWeb项目中已经导入依赖却报错依赖不存在

问题描述 在使用 Maven Servlet Tomcat 来搭建 JavaWeb 项目时&#xff0c;在 pom.xml 中正确引入了依赖&#xff0c;编码过程中也能够正常使用。但是在启动 Tomcat 之后&#xff08;启动时或启动后&#xff09;&#xff0c;却报错显示该依赖不存在。 可能原因 pom.xml 的…

项目篇 | 图书管理系统 | 图像加载与绘制

项目篇 | 图书管理系统 | 图像加载与绘制 基本介绍 首先解释清楚什么叫图像加载与绘制,意思就是说项目中需要用到一些图片资源(各种图标),我们要在图书管理系统中展示这些图片,就需要先导入图片到项目中,再加载图片资源(通过资源路径)、绘制图片(即展示)。 注:如果…

恢复Django 项目

随笔记录 目录 1. 重建Mysql DB 2. 启动Django 项目 2.1 确保你的系统上已安装pip工具。你可以使用以下命令来检查pip是否已安装 2.2 安装Packages 2.2.1 安装Django 2.2.2 安装pymysql 2.2.3 安装 kafka 2.2.4 安装 requests 2.2.5 安装simplepro 2.2.6 安装libjp…

亿赛通电子文档安全管理系统 SQL注入漏洞复现

0x01 产品简介 亿赛通电子文档安全管理系统&#xff08;简称&#xff1a;CDG&#xff09;是一款电子文档安全加密软件&#xff0c;该系统利用驱动层透明加密技术&#xff0c;通过对电子文档的加密保护&#xff0c;防止内部员工泄密和外部人员非法窃取企业核心重要数据资产&…