React系列面试题

大家好,我是有用就点赞,有用就扩散。

1.React的组件间通信都有哪些形式?

  1. 父传子:在React中,父组件调用子组件时可以将要传递给子组件的数据添加在子组件的属性中,在子组件中通过props属性进行接收。这个就是父组件向子组件通信。
  2. 子传父:React是单向数据流,数据永远只能自上向下进行传递。当子组件中有些数据需要向父级进行通信时,需要在父级中定义好回调,将回调传递给子组件,子组件调用父级传递过来的回调方法进行通信。
  3. 跨组件通信,context。使用context API,可以在组件中向子孙级组件进行信息传递。

2.React中如何实现路由懒加载?

在React16中,新增了lazy方法,通过lazy方法可以轻松实现组件懒加载,当然要实现路由懒加载的话,其实也只需要把路由组件结合lazy使用即可。

在下述代码中,我们使用lazy引入了一个动态组件,然后将该组件放入了根路由中,这样的话只有用户访问网站首页时,才会动态加载这个组件。

**注意事项:**在React规范中,lazy和Suspense必须配合使用,lazy引入的动态组件必须要放入Suspense中,Suspense的fallback属性是lazy的组件没有加载进来之前的占位内容。

import {Route} from "react-router-dom"
import React,{Suspense} from "react"
const HomeView = React.lazy(()=>import("./home"))
const App = ()=> {return (<div><h1>路由懒加载</h1><Route path="/" exact render={()=>{return (<Suspense fallback={<div>组件Loading进来之前的占位内容</div>}><HomeView/></Suspense>)}} /></div>)
}
export default App

3.React的生命周期函数都有哪些?分别有什么作用?

React的生命周期已经历经了3次改动,我们以最新的版本为准。

  • 在16.3版本之前,constructor初始化之后是使用到是componentDidMount这个生命周期。

  • 在16.3版本,后面发现componentDidMount这个函数有没有都没有区别,添加了getDerivedStateFromProps函数,影响的是挂载时和父组件更新时的生命周期函数。

  • 16.4版本之后,getDeriveStateFromProps函数,影响的是挂载时和父组件和本身组件更新时的生命周期函数。

挂载阶段:

  1. constructor:初始化组件,初始化组件的state等。
  2. static getDerivedStateFromProps():该函数用于将props中的信息映射到state中。
  3. render:生成虚拟DOM。
  4. componentDidMount:组件挂载完成,通过在该函数中去处理副作用。

更新阶段:

  1. static getDerivedStateFromProps()
  2. shouldComponentUpdate():该生命周期函数用于判断是否要进行组件更新。
  3. render():生成虚拟DOM
  4. getSnapshotBeforeUpdate():组件已经完成diff,即将更新真实DOM,用户获取上一次的DOM快照。该函数必须搭配componentDidUpdate一块使用,返回值会变成componentDidUpdate第三个参数。
  5. componentDidUpdate():组件更新完成,通常在该函数中进行副作用处理。

即将卸载:

  • compoentWillUnmount:组件即将卸载,用于删除组件添加到全局的数据或事件。

4.说一下React Hooks在平时开发中需要注意的问题和原因?

React Hooks在使用时注意事项:

  1. 只能在React函数中使用(函数式组件或自定义hook)。
  2. 只能在函数最外层调用hook,不能包括在if,for等语句中或者子函数中。
  3. useState中存储的是引用类型的数据时,修改state时,一定要返回新的引用。

原因:

  1. Hooks专为函数组件的逻辑复用而设计所以只能用在函数式组件和自定义hooks。
  2. hooks在调用的时候,需要确保先后调用顺序,一个顺序出问题,会导致整个程序的混乱。
  3. 如果在useState中存储的是引用类型,更新时不更引用地址时的话,React会认为我们没有更新数据,则不进行组件更新。

5.setState是同步还是异步?

React可以检测到的时候是异步,React检测不到时是同步

源码相关的方法:batch updater

监听的主要是:isBatchUpdater = true

在批量更新机制下会检测到,所以这个时候setState是异步的,或者其他React自带函数使用的时候会检测到。

使用setTimeout或者在使用生命周期的时候使用事件,此时的isBatchUpdater会原来的true变成false,所以这个时候setState是同步的。

6.React逻辑复用

复用的4种方式:

  1. 直接把相同的代码复制一份到需要使用的组件种(非常low的方式)

  2. 创建一个高阶组件,将复用的组件存放到高阶组件中,需要使用的组件直接复用

    高阶组件(HOC)的注意事项:

    (1)不要在render方法内使用高阶组件,因为每次高阶组件返回的都是不同的组件,会造成不必要的渲染

    (2)必须将静态方法做拷贝

    HOC带来的问题:

    (1)当存在多个HOC时,不知道props是从哪里来

    (2)和Mixin一样,存在相同名称的props,则存在覆盖问题,而且react并不会报错

    (3)JSX层次中多了很多层次(即无用的空组件),不利于调试

    (4)HOC属于静态构建,静态构建即是重新生成一个组件,即返回的新组件,不会马上渲染,即新组件中定义的生命周期函数只有新组件被渲染时才会执行。

  3. 使用render函数使组件达到复用

  4. 使用自定义hooks

    (1)自定义hook可以在不增加组件的情况下达到同样的目的

    (2)hook是一种复用的状态逻辑的方式,它不复用state本身

    (3)事实上hook的每次调用都有一个完全独立的state

    (4)自定义hook更像是一种约定,而不是一种功能。如果函数的名字以use开头,并且调用了其他的hook,则就称其为一个自定义hook

7.在React中,针对类组件和函数组件,分别怎么去进行性能优化?

  • 在类组件中可以使用shouldComponentUpdate或者PureComponent
  • 在函数组件中则可以使用memo(引用类型的时候在包裹一层)

8.请结合React Router实现React项目的路由守卫

React实现路由拦截的基本思路还是利用Route的render函数,通过判断拦截条件来实现不同的组件的跳转,从而实现拦截

9.是否使用过React Portals,在什么场景下使用?

Portal提供了一种将子节点渲染到存在于父组件以外的DOM节点的优秀方案。

场景:

一个Portal的典型用例是当父组件有overflow:hidden或z-index样式时,需要子组件能够在视觉上“跳出”其容器。例如:对话框、悬浮卡以及提示框

10.在函数组件中,如何获取组件更新前的state?

可以利用useRef保存state,当useRef存储的是数据,数据不会随着组件的更新而自动更新,要想获取组件更新前的state,在useEffect里面监听state的变化,从而把之前的state赋值给useRef定义的数据,达到获取组件更新前的state。

关于各位大哥投稿PR。

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

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

相关文章

AI伦理困境与隐私保护策略:透明、公平与安全的未来

AI伦理与隐私保护&#xff1a;如何应对挑战并建立治理框架 概述&#xff1a; 随着人工智能的普及&#xff0c;AI伦理和隐私保护问题日益受到关注。本文深入探讨如何在推动AI技术发展的同时&#xff0c;确保透明度、公平性和个人隐私权不受侵犯&#xff0c;为构建负责任的AI未来…

Android ConstraintLayout 约束布局

目录 1&#xff09;ConstraintLayout 约束布局是什么&#xff1f;为什么使用&#xff1f; 2&#xff09;如何使用 3&#xff09;可见性改变后的行为处理 4&#xff09;图形化界面的一些工具介绍 5&#xff09;Chains ( 链 ) 一、ConstraintLayout 约束布局是什么 Constraint…

【无人机】测绘行业新时代

【无人机】测绘行业新时代 无人机测绘主要指的是依托无人机系统为主要的信息接收平台&#xff0c;通过无人机机载遥感信息采集和处理设备&#xff0c;将最终所获取的遥感信息传输到测绘中心&#xff0c;经过数据技术处理&#xff0c;形成立体化的数字模型&#xff0c;以满足行…

JavaScript 输出

JavaScript 不提供任何内建的打印或显示函数。 JavaScript 显示方案 JavaScript 能够以不同方式“显示”数据&#xff1a; 使用 window.alert() 写入警告框使用 document.write() 写入 HTML 输出使用 innerHTML 写入 HTML 元素使用 console.log() 写入浏览器控制台 使用 in…

想要连接稳定的远程控软件吗?这4款软件不要错过

远程控制电脑是一种现代社会高效便捷的办公方式。这种方式可以不论时间不论地点都可以调用到办公电脑里的文件&#xff0c;如果你办公也有这个需求&#xff0c;那就看看我介绍的工具吧。 1.RL远程控制 直通车>>https://www.raylink.live 这个软件非常适合用来进行手机…

Linux常用打包压缩命令

压缩命令应用场景tar大部分使用tar即可。创建&#xff0c;查看&#xff0c;解压&#xff0c;解压到指定目录gzip一般配合其他命令使用zipunzip一般用于解压zip格式的压缩包 1. tar 打包压缩命令 1.1 命令详解 【功能说明】 在Linux系统里&#xff0c;tar是将多个文件打包在…

KEEP_HIERARCHY

KEEP_HIERACHY指示工具保留用户层次结构&#xff0c;以便优化不会 跨越其边界。虽然这有助于布局规划、分析和调试&#xff0c;但它 会抑制优化&#xff0c;导致更大、更慢的设计。 建议&#xff1a;为了避免这些负面影响&#xff0c;请注册一个模块实例的所有输出&#xff0c;…

使用【Easypoi】实现百万数据导出

本文使用easypoi实现百万级数据导出 文章目录 前言一、一般情况下导出二、解决思路三、实现步骤导入依赖重写方法调用实现 结束 前言 下文实现了通过easypoi实现将百万级数据导出 一、一般情况下导出 一般导出流程&#xff08;简单导出&#xff09;&#xff1a; 创建对应的…

智能制造的规划之路线部分

作为新建FAB厂的智能制造负责人&#xff0c;实现智能制造是一个系统工程&#xff0c;需要从战略规划到具体实施的各个层面进行考虑。以下是初稿。。。 1. |明确目标和需求|&#xff1a; - 确定智能制造的目标&#xff0c;比如提高生产效率、降低成本、提升产品质量等。 …

数据库安全综合治理方案(54页PPT)附下载

方案介绍&#xff1a; 数据库安全综合治理方案是一个综合性的策略&#xff0c;旨在确保数据库系统的完整性、保密性和可用性&#xff0c;防止未经授权的访问、数据泄露、篡改及滥用。该方案涉及多个层面&#xff0c;包括访问控制、数据加密、审计与监控、备份与恢复、以及安全…

Dreambooth on Stable Diffusion

Dreambooth on Stable Diffusion 1.DreamBooth: Fine Tuning Text-to-Image Diffusion Models for Subject-Driven Generation 2.[论文简析]DreamBooth: Fine Tuning Text-to-Image Diffusion Models…[2208.12242] 3.sd_dreambooth_extension 4.stable-dreambooth 对3-5张特定…

17.5【C语言】static的补充说明

static &#xff08;静态的) 作用&#xff1a;修饰局部变量&#xff0c;修饰全局变量&#xff0c;修饰函数 对比两段代码 #include <stdio.h> void test() {int a 5;a;printf("%d ", a); } int main() {int i 0;for(i0; i<5; i){test();}return 0; } …

HarmonyOS 质量、测试、上架速浏

1.应用质量要求&#xff1a; 1. 应用体验质量建议: 功能数据完备 功能完备 数据完备 基础体验要求 基础约束 兼容性 稳定性 性能 功耗 安全…

IPython的Bash之舞:%%bash命令全解析

IPython的Bash之舞&#xff1a;%%bash命令全解析 IPython的%%bash魔术命令为Jupyter Notebook用户提供了一种在单元格中直接执行Bash脚本的能力。这个特性特别适用于需要在Notebook中运行系统命令或Bash特定功能的场景。本文将详细介绍如何在IPython中使用%%bash命令&#xff…

reduceByKey 函数详解

reduceByKey 函数详解 实现原理 reduceByKey 函数主要用于处理分布式数据集。它接收两个操作符作为参数&#xff1a; keySelector&#xff1a;这是一个映射函数&#xff0c;用于从输入元素中提取键。 valueReducer&#xff1a;这是另一个函数&#xff0c;用于将具有相同键的…

网格布局 HTML CSS grid layout demo

文章目录 页面效果代码 (HTML CSS)参考 页面效果 代码 (HTML CSS) <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"…

高速传输新体验:探索最新USB-C移动硬盘盒的无限可能

在数字化时代&#xff0c;数据存储的重要性不言而喻&#xff0c;而硬盘盒作为连接外部硬盘与计算机的关键设备&#xff0c;其功能也在不断进化。近年来&#xff0c;随着技术的创新与发展&#xff0c;市场上出现了一种新型硬盘盒——它不仅能安全、高效地存储和传输数据&#xf…

安装VMware Workstation Pro

一、下载 通过百度网盘分享的文件&#xff1a;VMware-workstation-full-16.2.4-2008... 链接&#xff1a;https://pan.baidu.com/s/1mDnFhLQErBlpeX_KjsgtzA 提取码&#xff1a;0bw7 二、安装 &#xff08;1&#xff09;双击exe文件 &#xff08;2&#xff09;安装软件 &…

Docker搭建Flink

Docker搭建Flink环境的步骤&#xff1a; 1. 安装Docker 确保你的系统已经安装了Docker。如果没有安装&#xff0c;可以参考以下命令进行安装&#xff1a; # 对于Ubuntu系统 sudo apt-get update sudo apt-get install docker-ce docker-ce-cli containerd.io # 对于CentOS系…

算法-bfs-八数码

题目一 解题思路 将每一串字符都想象成一个点&#xff0c;已知起点和终点,每一次更新相邻的节点&#xff0c;采用bfs得到到达终点的最短路径。 数据结构&#xff1a; unordered_map&#xff08;哈希表&#xff09;来存储每种字符串对应情况需要移动的次数。 queue(队列)存储…