面试 React 框架八股文十问十答第八期

面试 React 框架八股文十问十答第八期

作者:程序员小白条,个人博客

相信看了本文后,对你的面试是有一定帮助的!关注专栏后就能收到持续更新!

⭐点赞⭐收藏⭐不迷路!⭐

1)组件通信的方式有哪些?

在 React 中,组件通信的方式主要有以下几种:

  • 父子组件通信: 通过 props 将数据传递给子组件,子组件通过回调函数或事件来与父组件通信。
  • 子父组件通信: 子组件通过 props 接收回调函数,通过该函数将信息传递给父组件。
  • 兄弟组件通信: 通过将共享的状态提升到它们的共同父组件,并通过 props 传递给各个兄弟组件,或者使用状态管理库(如 Redux)来管理共享状态。
  • 上下文(Context): 使用 React 的上下文 API,允许在组件树中传递数据,而不必手动通过 props 层层传递。
  • 全局状态管理库: 使用像 Redux、MobX 等状态管理库,允许在整个应用程序中共享状态。

2)React-Router 的实现原理是什么?

React-Router 是 React 应用中用于处理导航和路由的库。它的实现原理主要基于 React 的上下文(Context)和组件渲染的特性。React-Router 通过声明式的方式定义路由配置,使用 React 组件来表示不同的页面。

具体实现原理包括:

  • 利用 React 上下文(Context)来传递路由信息,使得路由信息可以在整个组件树中共享。
  • 使用 <Route> 组件来匹配 URL 和组件,决定哪个组件应该渲染。
  • 使用 <Link> 组件提供声明式的导航,它实际上是一个渲染了 <a> 标签的组件。
  • 使用 history 对象来监听 URL 变化,从而实现导航时组件的重新渲染。

3)如何配置 React-Router 实现路由切换

在 React-Router 中,配置路由切换主要通过以下步骤:

  1. 安装 React-Router: 使用 npm 或 yarn 安装 React-Router 相关的包,如 react-router-dom

    npm install react-router-dom
    
  2. 引入 BrowserRouter 或 HashRouter: 在应用的入口文件中引入 BrowserRouterHashRouter,并将整个应用包裹在其中。

    import { BrowserRouter as Router } from 'react-router-dom';ReactDOM.render(<Router><App /></Router>,document.getElementById('root')
    );
    
  3. 定义路由: 在应用中使用 <Route> 组件定义路由,将路径与对应的组件关联起来。

    import { Route } from 'react-router-dom';function App() {return (<div><Route path="/home" component={Home} /><Route path="/about" component={About} /></div>);
    }
    
  4. 使用 Link 进行导航: 使用 <Link> 组件或 useHistory 钩子进行导航。

    import { Link } from 'react-router-dom';function Navigation() {return (<div><Link to="/home">Home</Link><Link to="/about">About</Link></div>);
    }
    

4)React-Router怎么设置重定向?

在 React-Router 中,可以使用 <Redirect> 组件来进行重定向。下面是一个简单的例子:

import { BrowserRouter as Router, Route, Redirect } from 'react-router-dom';function App() {return (<Router><div><Route path="/home" component={Home} /><Route path="/about" component={About} /><Route path="/old-route">{/* 设置重定向 */}<Redirect to="/new-route" /></Route><Route path="/new-route" component={NewRoute} /></div></Router>);
}

在上述例子中,如果用户访问 /old-route,将会被重定向到 /new-route

5)react-router 里的 Link 标签和 a 标签的区别

<Link> 组件和 <a> 标签都可以用于导航,但它们之间有一些关键区别:

  • 性能优化: <Link> 组件在点击时会阻止浏览器默认的页面刷新,从而避免了完整的页面重新加载。这可以提高性能,尤其在单页面应用中。相比之下,使用 <a> 标签可能导致整个页面的重新加载。
  • 样式处理: <Link> 组件在当前页面匹配的时候可以方便地添加样式,以突显当前活动的链接,而 <a> 标签则需要通过其他手段来处理当前活动链接的样式。
  • 应用场景: <Link> 组件更适合在 React 单页面应用中使用,而 <a> 标签更适合传统多页面应用。

总体而言,使用 <Link> 组件更符合 React 单页面应用的设计理念,而 <a> 标签更适合传统的多页面应用。

6)React-Router如何获取URL的参数和历史对象?

在 React-Router 中,可以使用 useParams 钩子来获取 URL 中的参数,而历史对象则可以通过 useHistory 钩子来获取。以下是使用这两个钩子的简单示例:

import { useParams, useHistory } from 'react-router-dom';function MyComponent() {// 获取URL参数const { id } = useParams();// 获取历史对象const history = useHistory();// 在组件中使用参数和历史对象const handleClick = () => {// 通过 push 进行导航history.push('/new-route');};return (<div><p>URL参数: {id}</p><button onClick={handleClick}>Navigate to New Route</button></div>);
}

在上述例子中,useParams 钩子用于获取 URL 中的参数,而 useHistory 钩子用于获取历史对象,可以通过该对象进行导航等操作。

7)React-Router的路由有几种模式?

React-Router 提供了两种主要的路由模式:

  • BrowserRouter: 使用 HTML5 History API,路由通过浏览器的 pushStatereplaceState 方法来实现,可以去除 URL 中的 #

    import { BrowserRouter as Router } from 'react-router-dom';// ...
    
  • HashRouter: 使用 URL 的哈希部分(即 # 后的部分)来进行路由,不依赖于 History API,适用于不支持 HTML5 History API 的环境。

    import { HashRouter as Router } from 'react-router-dom';// ...
    

在应用中选择使用哪种模式取决于你的服务器配置和浏览器支持情况。

8)React-Router 4的Switch有什么用?

<Switch> 组件是 React-Router 中的一个容器组件,它用于渲染与当前 URL 匹配的第一个 <Route><Redirect>。当有多个路由规则匹配到相同的路径时,<Switch> 只会渲染第一个匹配到的路由,而忽略后续的匹配项。

import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';function App() {return (<Router><Switch><Route path="/home" component={Home} /><Route path="/about" component={About} /><Route path="/contact" component={Contact} /></Switch></Router>);
}

在上述例子中,如果 URL 同时匹配 /home/about/contact<Switch> 只会渲染第一个匹配到的 <Route>,而不会同时渲染多个。

9)对 Redux 的理解,主要解决什么问题

Redux 是一个状态管理库,主要用于解决 React 应用中状态管理的复杂性和一致性问题。它的核心概念包括:

  • 单一数据源: 应用的状态被存储在一个单一的 JavaScript 对象中,称为 Store。这种单一数据源的设计使得整个应用的状态变得可预测和可维护。
  • 状态不可变性: 状态的修改通过纯函数(Reducers)进行,不直接修改原始状态,而是返回一个新的状态对象。这样的不可变性有助于跟踪状态的变化,便于调试和性能优化。
  • 通过 Actions 触发状态变化: 状态的变化通过 Actions 触发,Actions 是描述状态变化的纯 JavaScript 对象。Reducers 根据收到的 Action 来更新状态。
  • 中心化的状态管理: Redux 提供了一个中心化的状态管理容器(Store),使得整个应用中任何组件都能方便地访问和修改应用的状态。

主要问题的解决方案包括:

  • 组件通信: 在大型应用中,多个组件之间的状态共享和通信变得复杂。Redux 提供了一个中央存储,使得组件之间可以通过访问相同的状态来进行通信。
  • 状态一致性: 当应用状态分散在多个组件中时,可能导致状态不一致的问题。Redux 强调单一数据源和不可变性,确保状态的一致性。
  • 调试和追踪: Redux 提供了强大的开发者工具,可以轻松地追踪状态变化、查看 Action 日志,并进行时间旅行式的调试。

10)Redux 原理及工作流程

Redux 的工作流程主要包括以下几个步骤:

  1. Action: 应用中的任何状态变化都需要通过 Action 来描述。Action 是一个普通的 JavaScript 对象,其中包含一个 type 属性表示动作的类型,以及其他可能的数据。
  2. Reducer: Reducer 是纯函数,接收当前状态和一个 Action,返回新的状态。Reducers 负责根据 Action 更新应用的状态。Redux 应用中可能有多个 Reducer,每个 Reducer 负责管理状态的一部分。
  3. Store: Store 是整个应用的状态容器。它通过 Redux 的 createStore 函数创建,接收根 Reducer 作为参数。Store 有三个主要功能:维护应用的状态、提供 getState 方法来获取当前状态、提供 dispatch 方法来触发状态变化。
  4. Dispatch: 要触发状态的变化,需要调用 Store 的 dispatch 方法,传入一个 Action。dispatch 方法会将 Action 发送给所有注册的 Reducers。
  5. Middleware(中间件): Middleware 是 Redux 的扩展机制

开源项目地址:https://gitee.com/falle22222n-leaves/vue_-book-manage-system

已 300 + Star!

⭐点赞⭐收藏⭐不迷路!⭐

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

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

相关文章

PTA(浙大版《C语言程序设计(第3版)》题目集

PTA(浙大版《C语言程序设计&#xff08;第3版&#xff09;》题目集 学习C语言程序设计的PTA题目 目录 PTA(浙大版《C语言程序设计&#xff08;第3版&#xff09;》题目集PTA(浙大版《C语言程序设计&#xff08;第3版&#xff09;》题目集) 习题2-1 求整数均值 (10 分)输入格式:…

JS常用插件 Swiper插件 实现轮播图

Swiper介绍 Swiper 是一款免费以及轻量级的移动设备触控滑块的js框架 中文官网地址: https://www.swiper.com.cn/ 点击查看Swiper演示&#xff0c;里面的功能和样式十分丰富&#xff0c;根据自己的需求选择 中文教程中详细介绍了如何使用Swiper API文档中介绍了各个模块以及参…

如何画出优秀的系统架构图-架构师系列-学习总结

--- 后之视今&#xff0c;亦犹今之视昔&#xff01; 目录 早期系统架构图 早期系统架构视图 41视图解读 41架构视图缺点 现代系统架构图的指导实践 业务架构 例子 使用场景 画图技巧 客户端架构、前端架构 例子 使用场景 画图技巧 系统架构 例子 定义 使用场…

C++面试宝典第19题:最长公共前缀

题目 编写一个函数来查找字符串数组中的最长公共前缀,如果不存在公共前缀,返回空字符串""。说明:所有输入只包含小写字母a-z。 示例1: 输入: ["flower", "flow", "flight"]输出: "fl" 示例2: 输入: ["dog",…

微信小程序快速入门03

&#x1f3e1;浩泽学编程&#xff1a;个人主页 &#x1f525; 推荐专栏&#xff1a;《深入浅出SpringBoot》《java项目分享》 《RabbitMQ》《Spring》《SpringMVC》 &#x1f6f8;学无止境&#xff0c;不骄不躁&#xff0c;知行合一 文章目录 前言一、生命周期生…

手写springBoot启动器

提示&#xff1a;springboot原理&#xff0c;手写springboot启动器&#xff0c;手写模拟SpringBoot启动过程、手写模拟SpringBoot自动配置功能 文章目录 前言一、本文内容1、手写模拟SpringBoot启动过程2、手写模拟SpringBoot自动配置功能 二、项目总体介绍三、代码实现(手写模…

R语言【paleobioDB】——pbdb_scale():通过ID选择,返回一个时间刻度的基本信息

Package paleobioDB version 0.7.0 paleobioDB 包在2020年已经停止更新&#xff0c;该包依赖PBDB v1 API。 可以选择在Index of /src/contrib/Archive/paleobioDB (r-project.org)下载安装包后&#xff0c;执行本地安装。 Usage pbdb_scale (id, ...) Arguments 参数【id】&a…

python的库或函数不会用:使用help函数查看函数

help(time) # 查看time这个库 FUNCTIONS #函数&#xff1b;都可以调用asctime(...)asctime([tuple]) -> string #调用这个函数的参数需要一个元组&#xff08;tuple&#xff09;&#xff0c;->&#xff1a;代表返回值是string类型的#下面是简单的介绍Convert a time tup…

k8s的存储卷、数据卷---动态PV创建

当发布PVC之后可以生成PV&#xff0c;还可以在动态服务器上直接生成挂载目录。PVC直接绑定和使用PV。 动态PV需要两个组件 存储卷插件&#xff1a;Provisioner(存储分配器)根据定义的属性创建PV StorageClass&#xff1a;定义属性 存储卷插件 存储卷插件&#xff1a;k8s本…

ElasticSearch降本增效常见的方法 | 京东云技术团队

Elasticsearch在db_ranking 的排名不断上升&#xff0c;其在存储领域已经蔚然成风且占有非常重要的地位。 随着Elasticsearch越来越受欢迎&#xff0c;企业花费在ES建设上的成本自然也不少。那如何减少ES的成本呢&#xff1f;今天我们就特地来聊聊ES降本增效的常见方法&#x…

服务器和电脑有啥区别?

服务器可以说是“高配的电脑”&#xff0c;两者都有CPU、硬盘、电源等基础硬件组成&#xff0c;但服务器和电脑也是有一定区别的&#xff0c;让小编带大家了解一下吧&#xff01; #秋天生活图鉴# 1、稳定性需求不同&#xff1a;服务器是全年无休&#xff0c;需要高稳定性&…

世微大功率 内置2.5A宽电压降压恒流 LED电源驱动车灯IC AP5193

AP5193是一款PWM工作模式,高效率、外围简单、 内置功率MOS管&#xff0c;适用于4.5-100V输入的高精度 降压LED恒流驱动芯片。电流2.5A。AP5193可实现线性调光和PWM调光&#xff0c;线性调光 脚有效电压范围0.55-2.6V. AP5193 工作频率可以通过RT 外部电阻编程来设定&#xff0c…

快乐学Python,数据分析之使用爬虫获取网页内容

在上一篇文章中&#xff0c;我们了解了爬虫的原理以及要实现爬虫的三个主要步骤&#xff1a;下载网页-分析网页-保存数据。 下面&#xff0c;我们就来看一下&#xff1a;如何使用Python下载网页。 1、网页是什么&#xff1f; 浏览器画网页的流程&#xff0c;是浏览器将用户输…

JDBC事务

1.事务 数据库事务是一组数据库操作&#xff0c;它们被视为一个单一的逻辑工作单元&#xff0c;要么全部成功执行&#xff0c;要么全部回滚&#xff08;撤销&#xff09;到事务开始前的状态。事务是确保数据库数据一致性、完整性和可靠性的关键机制之一。 简单来说&#xff0…

Python代码调试的几种方法总结

使用 pdb 进行调试 pdb 是 python 自带的一个包&#xff0c;为 python 程序提供了一种交互的源代码调试功能&#xff0c;主要特性包括设置断点、单步调试、进入函数调试、查看当前代码、查看栈片段、动态改变变量的值等。pdb 提供了一些常用的调试命令&#xff0c;详情见表 1。…

互联网加竞赛 基于机器视觉的12306验证码识别

文章目录 0 简介1 数据收集2 识别过程3 网络构建4 数据读取5 模型训练6 加入Dropout层7 数据增强8 迁移学习9 结果9 最后 0 简介 &#x1f525; 优质竞赛项目系列&#xff0c;今天要分享的是 基于机器视觉的12306验证码识别 该项目较为新颖&#xff0c;适合作为竞赛课题方向…

6.1810: Operating System Engineering 2023 <Lab7 lock: Parallelism/locking>

一、本节任务 二、要点 2.1 文件系统&#xff08;file system&#xff09; xv6 文件系统软件层次如下&#xff1a; 通过路径树我们可以找到相应的文件&#xff1a; fd&#xff08;文件描述符&#xff09;是进程用来标识其打开的文件的手段&#xff0c;每个进程有自己的文件…

从0开始学前端第二天

学习内容&#xff1a; css 行内样式表 页内样式表 外部样式表 同步修改所有某一类标签的内容&#xff1a;内部样式表 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"viewport" conte…

程序员有哪些接s单的渠道?

这题我会&#xff01;程序员接单的渠道那可太多了&#xff0c;想要接到合适的单子&#xff0c;筛选一个合适的平台很重要。如果你也在寻找一个合适的接单渠道&#xff0c;可以参考以下这些方向。 首先&#xff0c;程序员要对接单有一个基本的概念&#xff1a;接单渠道可以先粗…

Elasticsearch_8.11.4_kibana_8.11.4_metricbeat_8.11.4安装及本地部署_ELK日志部署

文章目录 Elasticsearch_8.11.4_kibana_8.11.4_metricbeat_8.11.4安装及本地部署_ELK日志部署分布式引擎Elasticsearch_8.11.4安装及本地部署系统环境要求1 Windows 安装 Elasticsearch下载完成后进行解压,进入 bin 目录,找到elasticsearch.bat脚本文件执行一键启动.启动都选允…