React常见面试题

React常见面试题

一、React中的样式管理有哪些方法

  • 内联样式:对象,作用于当前组件
  • 普通样式表: 作用于全局,文件名是:xxx.scss
  • CSS模块:类似Vue的scoped, 文件名需是:xxx.module.scss,作用于当前组件
  • CSS-in-JS库:具有一定的学习成本。例如:
    • styled-components:star最多
    • emotion: 体积最小
    • JSS
    • radium

二、什么是React的代码分割(Code Splitting)?如何实现代码分割?

  • React的代码分割(Code Splitting)

是一种将应用程序代码分割成多个较小文件的技术,以实现按需加载和优化应用程序性能的目的。

  • 如何实现代码分割:
    • 使用动态import:通过将需要分割的组件或模块包装在import()函数中
    • 使用React.lazy和Suspense组件: React.lazy函数可以接受一个函数,该函数返回一个Promise,该Promise解析为一个React组件。。而Suspense组件可以用来在组件加载完成之前显示一个加载中的界面
    • 使用Webpack的代码分割功能:
import React, { lazy, Suspense } from 'react';const MyComponent = lazy(() => import('./MyComponent'));function App() {return (<div><Suspense fallback={<div>Loading...</div>}><MyComponent /></Suspense></div>);
}
// 使用Webpack的代码分割功能: 
module.exports = {// ...optimization: {splitChunks: {chunks: 'all',},},
};

三、什么是React的错误边界(Error Boundary)?如何使用错误边界处理组件中的错误?

1、什么是React的错误边界(Error Boundary)?

当React组件中发生错误时,错误边界(Error Boundary)是一种React组件,它通过实现特定的生命周期方法捕获并处理这些错误,从而防止整个组件树崩溃。

2、如何使用错误边界处理组件中的错误?

  • 创建一个错误边界组件,可以是一个普通的React组件
  • 在错误边界组件中实现componentDidCatch生命周期方法,该方法将在子组件抛出错误时被调用。可以通过error和info参数来获取错误信息和错误堆栈信息。可以根据需要处理错误,例如显示错误信息或发送错误报告。

创建错误边界组件:

import React from 'react'class ErrorBoundary extends React.Component {constructor(props: any) {super(props)this.state = { hasError: false }}static getDerivedStateFromError(error: any) {return { hasError: true, error }}componentDidCatch(error: any, errorInfo: any) {// 可以在这里记录错误信息或发送错误报告console.error(error, errorInfo, '错误信息')}render() {if (this.state.hasError) {return <h1>出现错误!</h1>}return this.props.children}
}export default ErrorBoundary

使用错误边界组件包裹可能出错的组件

import ErrorBoundary from '@/components/ErrorBoundary'
import BgBox from './_Components/BgBox'
const Home = () => {return (<><ErrorBoundary><BgBox /></ErrorBoundary></>)
}
export default Home

模拟出错的组件BgBox

export default function BgBox() {throw new Error('错误信息测试')
}

四、什么是React的Fragment?它的作用是什么?

1、什么是React的Fragment?

React的Fragment是一种组件,它允许将多个子元素组合成一个组件而无需添加额外的DOM元素

2、Fragment作用:

减少不必要的包裹元素,提高代码的可读性

<React.Fragment><p>Hello</p><p>World</p>
</React.Fragment>// 简写:
<><p>Hello</p><p>World</p>
</>

五、React的上下文(context)是一种在组件树中共享数据的方式

React性能优化

  • 使用shouldComponentUpdate生命周期方法: 控制组件是否进行更新,可以避免不必要的更新
  • 使用React.memo和React.PureComponent: React.memo是一个高阶组件,用于对函数组件进行记忆化,只有在组件的props发生变化时才会重新渲染。React.PureComponent是一个基于浅比较的Pure组件,只有在props或state发生变化时才会重新渲染
  • 使用React.lazy和React.Suspense: React.lazy和React.Suspense可以实现组件的懒加载
  • 使用memoization: 通过使用memoization技术,可以将一些计算结果缓存起来,避免重复计算
  • useMemo() 可以缓存计算结果
  • 避免在render方法中进行复杂的计算或操作: render方法会在组件更新时被调用,如果在render方法中进行复杂的计算或操作,会导致性能下降
  • 使用 React Fragments 避免额外标记: 即虚拟的顶层标签 <></>
  • 避免使用内联样式属性

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

代客泊车对HUT功能交互规范

目录 1. 版本记录... 7 2. 文档范围和控制... 8 2.1 目的/范围... 8 2.2 文档冲突... 8 2.3 文档授权... 8 2.4 文档更改控制... 8 3. 系统组成... 9 3.1 IPAS系统&#xff08;环视和超声波雷达&#xff09;...…

Springboot简单利用@RestControllerAdvice优雅的捕获异常

1.注解 ExceptionHandler&#xff1a;用于指定异常处理方法。当与RestControllerAdvice配合使用时&#xff0c;用于全局处理控制器里的异常。 2.配置类 RestControllerAdvice Slf4j public class GlobalExceptionHandler {ExceptionHandler(Exception.class)public Result h…

LeetCode 39. 组合总和(回溯+剪枝)

题目&#xff1a; 链接&#xff1a;LeetCode 39. 组合总和 难度&#xff1a;中等 给你一个 无重复元素 的整数数组 candidates 和一个目标整数 target &#xff0c;找出 candidates 中可以使数字和为目标数 target 的 所有 不同组合 &#xff0c;并以列表形式返回。你可以按 …

Java - sh 脚本启动 jar 包等服务 - sh 脚本模板 - 适用于任何类似的服务启动

sh 脚本模板 该模板&#xff0c;每次运行一次都会 kill 掉原来的服务&#xff0c;然后重新启动 jar 包服务 #!/bin/bash# 定义Java进程的名称 APP_NAMEyour-app-name.jar# 定义Java进程的日志文件路径 LOG_PATH/var/log/your-app-name.log# 定义备份日志文件的目录 BACKUP_DI…

PyTorch(安装及卸载)

目录 1. 安装 2. 卸载 参考文献 为什么用PyTorch&#xff1a;简单来说&#xff0c;19年之前tensorflow是大哥&#xff0c;19年tensorflow和PyTorch双龙并行&#xff0c;20年之后PyTorch一往无前。宗旨&#xff0c;哪个用的人多用哪个。 1. 安装 1. 先打开Anaconda Prompt&…

uniapp自定义消息语音

需求是后端推送的消息APP要响自定义语音&#xff0c;利用官方插件&#xff0c;总结下整体流程 uniapp后台配置 因为2.0只支持uniapp自己的后台发送消息&#xff0c;所以要自己的后台发送消息只能用1.0 插件地址和代码 插件地址: link let isIos (plus.os.name "iOS&qu…

C++内存管理

目录 一.C中内存区域划分 一.C中内存区域划分 1.栈又叫堆栈--非静态局部变量/函数参数/返回值等等&#xff0c;栈是向下增长的。 2.内存映射段是高效的I/O映射方式&#xff0c;用于装载一个共享的动态内存库。用户可使用系统接口创建共享共享内存&#xff0c;做进程间通信。 …

P1025 [NOIP2001 提高组] 数的划分(dfs+剪枝 or dp)

dfs剪枝 思路&#xff1a;暴力枚举搜索&#xff0c;不过要优雅剪枝一下下 1:处理重复情况-->我们只需要然后方取值从前往后的时候呈现递增&#xff08;可以相等&#xff0c;即不递减&#xff09; 2&#xff1a;剪枝-->基于上思想&#xff0c;剩下的“盘子”里面的数至…

手撕SpringBoot的自定义启动器

一. 前言 哈喽&#xff0c;大家好&#xff0c;最近金九银十&#xff0c;又有不少小伙伴私信辉哥&#xff0c;说自己在面试时被问到SpringBoot如何自定义启动器&#xff0c;结果自己不知道该怎么回答。那么今天就手把手地带着大家&#xff0c;去看看在SpringBoot中到底该怎么实…

亚马逊买家账号ip关联怎么处理

对于亚马逊买家账号&#xff0c;同样需要注意IP关联问题。在亚马逊的眼中&#xff0c;如果多个买家账号共享相同的IP地址&#xff0c;可能会被视为潜在的操纵、违规或滥用行为。这种情况可能导致账号受到限制或处罚。 处理亚马逊买家账号IP关联问题&#xff0c;建议采取以下步骤…

生化危机5找不到xlive.dll,要如何修复xlive.dll缺失

有朋友反映说他在玩生化危机5的时候&#xff0c;突然电脑就弹出一个找不到xlive.dll&#xff0c;然后游戏就打不开了&#xff0c;一直都很懵逼&#xff0c;不知道怎么处理这个问题&#xff0c;今天小编就来给大家详细的讲讲&#xff0c;找不到xlive.dll要怎么去修复&#xff01…

危化品行业防雷检测综合解决方案

危化品是指具有毒害、腐蚀、爆炸、燃烧、助燃等性质&#xff0c;能够对人体、设施或者环境造成危害的化学品。危化品的生产、储存、运输、使用等过程中&#xff0c;都存在着遭受雷击引发火灾或者爆炸事故的风险。因此&#xff0c;对危化品场所进行防雷检测&#xff0c;是保障危…

【opencv学习】鼠标回调函数、鼠标控制画矩形

#include <iostream> #include <opencv2/opencv.hpp> using namespace cv; #define WinDow "程序窗口"void MouseHandle(int event, int x, int y, int flags, void* param);//鼠标回调函数 void Drawrectangle(cv::Mat& img, cv::Rect box);//矩形绘…

IDEA中修改类头的文档注释信息

IDEA中修改类头的文档注释信息 选择File--Settings--Editor--File and Code Templates--Includes&#xff0c;可以把文档注释写成这种的 /**author: Arbicoralcreate: ${YEAR}-${MONTH}-${DAY} ${TIME}Description: */这样回看就可以很清楚的看到自己创建脚本的时间&#xff…

什么是注意力机制?注意力机制的计算规则

我们观察事物时&#xff0c;之所以能够快速判断一种事物(当然允许判断是错误的)&#xff0c;是因为我们大脑能够很快把注意力放在事物最具有辨识度的部分从而作出判断&#xff0c;而并非是从头到尾的观察一遍事物后&#xff0c;才能有判断结果&#xff0c;正是基于这样的理论&a…

基于 FFlogs API 快速实现的 logs 颜色查询小爬虫

文章目录 找到接口解析响应需要平均颜色和过本次数&#xff1f; 找到接口 首先试了一下爬虫&#xff0c;发现和wow一样官网上有暴露的 API&#xff0c;链接在&#xff1a;FFlogs v1 API 文档链接 通过查询官方提供的 API 接口得知&#xff1a; user_name 角色名字 api_key …

数据结构—栈

栈 栈的概念及结构栈的实现 栈的概念及结构 栈&#xff1a;一种特殊的线性表&#xff0c;其只允许在固定的一端进行插入和删除元素操作。进行数据插入和删除操作的一端称为栈顶&#xff0c;另一端称为栈底。栈中的数据元素遵守后进先出LIFO&#xff08;Last In First Out&…

小夜灯的体势红外传感器 > 红外知识学习

红外是电磁辐射谱中的一部分&#xff0c;它位于可见光谱的红色边缘之外&#xff0c;具有较长的波长。可见光谱是人眼能够感知的电磁辐射范围&#xff0c;而红外光的波长较长&#xff0c;人眼无法感知。 生命光的范围是6~14um 红外光的波长范围一般约为0.7um~1000um&#xff08;…

STEP7 Micro/WIN组态软件使用

目录 1 安装 1.1 切换为中文 1.2 安装是否成功查看 2 PPI电缆线使用 3 上载下载 <

Oracle BITAND函数妙用解决方案

背景 有这样的一个需求&#xff0c;比如是用户与角色的关系&#xff0c;两者是多对多的。一个用户可以有多个角色&#xff0c;一个角色包含多个用户。我们很容易就考虑到了RBAC权限模型&#xff0c;那创建一个用户表&#xff0c;一个角色表&#xff0c;还有一个用户角色关联表…