jsonp react 获取返回值_必须要会的 50 个React 面试题(下)

翻译:疯狂的技术宅
原文:https://www.edureka.co/blog/interview-questions/react-interview-questions

29. 你对受控组件和非受控组件了解多少?

受控组件非受控组件
1. 没有维持自己的状态1. 保持着自己的状态
2.数据由父组件控制2.数据由 DOM 控制
3. 通过 props 获取当前值,然后通过回调通知更改3. Refs 用于获取其当前值

30.  什么是高阶组件(HOC)?

高阶组件是重用组件逻辑的高级方法,是一种源于 React 的组件模式。 HOC 是自定义组件,在它之内包含另一个组件。它们可以接受子组件提供的任何动态,但不会修改或复制其输入组件中的任何行为。你可以认为 HOC 是“纯(Pure)”组件。

31. 你能用HOC做什么?

HOC可用于许多任务,例如:

  • 代码重用,逻辑和引导抽象

  • 渲染劫持

  • 状态抽象和控制

  • Props 控制

32. 什么是纯组件?

纯(Pure) 组件是可以编写的最简单、最快的组件。它们可以替换任何只有 render() 的组件。这些组件增强了代码的简单性和应用的性能。

33. React 中 key 的重要性是什么?

key 用于识别唯一的 Virtual DOM 元素及其驱动 UI 的相应数据。它们通过回收 DOM 中当前所有的元素来帮助 React 优化渲染。这些 key 必须是唯一的数字或字符串,React 只是重新排序元素而不是重新渲染它们。这可以提高应用程序的性能。

React Redux

34. MVC框架的主要问题是什么?

以下是MVC框架的一些主要问题:

  • 对 DOM 操作的代价非常高

  • 程序运行缓慢且效率低下

  • 内存浪费严重

  • 由于循环依赖性,组件模型需要围绕 models 和 views 进行创建

35. 解释一下 Flux

5c6ce0ed35bd2a8b64ae0f6db5252aad.png

flux


Flux 是一种强制单向数据流的架构模式。它控制派生数据,并使用具有所有数据权限的中心 store 实现多个组件之间的通信。整个应用中的数据更新必须只能在此处进行。 Flux 为应用提供稳定性并减少运行时的错误。

36. 什么是Redux?

Redux 是当今最热门的前端开发库之一。它是 JavaScript 程序的可预测状态容器,用于整个应用的状态管理。使用 Redux 开发的应用易于测试,可以在不同环境中运行,并显示一致的行为。

37. Redux遵循的三个原则是什么?

  1. 单一事实来源:整个应用的状态存储在单个 store 中的对象/状态树里。单一状态树可以更容易地跟踪随时间的变化,并调试或检查应用程序。

  2. 状态是只读的:改变状态的唯一方法是去触发一个动作。动作是描述变化的普通 JS 对象。就像 state 是数据的最小表示一样,该操作是对数据更改的最小表示。

  3. 使用纯函数进行更改:为了指定状态树如何通过操作进行转换,你需要纯函数。纯函数是那些返回值仅取决于其参数值的函数。

151ac11b7fde5c8c3ccabae829cb1332.png

Store

38. 你对“单一事实来源”有什么理解?

Redux 使用 “Store” 将程序的整个状态存储在同一个地方。因此所有组件的状态都存储在 Store 中,并且它们从 Store 本身接收更新。单一状态树可以更容易地跟踪随时间的变化,并调试或检查程序。

39. 列出 Redux 的组件。

Redux 由以下组件组成:

  1. Action – 这是一个用来描述发生了什么事情的对象。

  2. Reducer –  这是一个确定状态将如何变化的地方。

  3. Store – 整个程序的状态/对象树保存在Store中。

  4. View – 只显示 Store 提供的数据。

40. 数据如何通过 Redux 流动?

ab0c535a861887eed4c79bee13632a5e.png

Data Flow in Redux

41. 如何在 Redux 中定义 Action?

React 中的 Action 必须具有 type 属性,该属性指示正在执行的 ACTION 的类型。必须将它们定义为字符串常量,并且还可以向其添加更多的属性。在 Redux 中,action 被名为 Action Creators 的函数所创建。以下是 Action 和Action Creator 的示例:

1function addTodo(text) {
2       return {
3                type: ADD_TODO,    
4                 text
5    }
6}

42. 解释 Reducer 的作用。

Reducers 是纯函数,它规定应用程序的状态怎样因响应 ACTION 而改变。Reducers 通过接受先前的状态和 action 来工作,然后它返回一个新的状态。它根据操作的类型确定需要执行哪种更新,然后返回新的值。如果不需要完成任务,它会返回原来的状态。

43. Store 在 Redux 中的意义是什么?

Store 是一个 JavaScript 对象,它可以保存程序的状态,并提供一些方法来访问状态、调度操作和注册侦听器。应用程序的整个状态/对象树保存在单一存储中。因此,Redux 非常简单且是可预测的。我们可以将中间件传递到 store 来处理数据,并记录改变存储状态的各种操作。所有操作都通过 reducer 返回一个新状态。

44.  Redux与Flux有何不同?

FluxRedux
1. Store 包含状态和更改逻辑1. Store 和更改逻辑是分开的
2. 有多个 Store2. 只有一个 Store
3. 所有 Store 都互不影响且是平级的3. 带有分层 reducer 的单一 Store
4. 有单一调度器4. 没有调度器的概念
5. React 组件订阅 store5. 容器组件是有联系的
6. 状态是可变的6. 状态是不可改变的

45. Redux 有哪些优点?

Redux 的优点如下:

  • 结果的可预测性 -  由于总是存在一个真实来源,即 store ,因此不存在如何将当前状态与动作和应用的其他部分同步的问题。

  • 可维护性 -  代码变得更容易维护,具有可预测的结果和严格的结构。

  • 服务器端渲染 -  你只需将服务器上创建的 store 传到客户端即可。这对初始渲染非常有用,并且可以优化应用性能,从而提供更好的用户体验。

  • 开发人员工具 -  从操作到状态更改,开发人员可以实时跟踪应用中发生的所有事情。

  • 社区和生态系统 -  Redux 背后有一个巨大的社区,这使得它更加迷人。一个由才华横溢的人组成的大型社区为库的改进做出了贡献,并开发了各种应用。

  • 易于测试 -  Redux 的代码主要是小巧、纯粹和独立的功能。这使代码可测试且独立。

  • 组织 -  Redux 准确地说明了代码的组织方式,这使得代码在团队使用时更加一致和简单。

React 路由

46. 什么是React 路由?

React 路由是一个构建在 React 之上的强大的路由库,它有助于向应用程序添加新的屏幕和流。这使 URL 与网页上显示的数据保持同步。它负责维护标准化的结构和行为,并用于开发单页 Web 应用。 React 路由有一个简单的API。

47. 为什么React Router v4中使用 switch 关键字 ?

虽然

用于封装 Router 中的多个路由,当你想要仅显示要在多个定义的路线中呈现的单个路线时,可以使用 “switch” 关键字。使用时,  标记会按顺序将已定义的 URL 与已定义的路由进行匹配。找到第一个匹配项后,它将渲染指定的路径。从而绕过其它路线。

48. 为什么需要 React 中的路由?

Router 用于定义多个路由,当用户定义特定的 URL 时,如果此 URL 与 Router 内定义的任何 “路由” 的路径匹配,则用户将重定向到该特定路由。所以基本上我们需要在自己的应用中添加一个 Router 库,允许创建多个路由,每个路由都会向我们提供一个独特的视图

12    3    4    5

49. 列出 React Router 的优点。

几个优点是:

就像 React 基于组件一样,在 React Router v4 中,API 是 'All About Components'。可以将 Router 可视化为单个根组件(),其中我们将特定的子路由( )包起来。

无需手动设置历史值:在 React Router v4 中,我们要做的就是将路由包装在 < BrowserRouter> 组件中。

包是分开的:共有三个包,分别用于 Web、Native 和 Core。这使我们应用更加紧凑。基于类似的编码风格很容易进行切换。

50. React Router与常规路由有何不同?

主题常规路由React 路由参与的页面每个视图对应一个新文件只涉及单个HTML页面URL 更改HTTP 请求被发送到服务器并且接收相应的 HTML 页面仅更改历史记录属性体验用户实际在每个视图的不同页面切换用户认为自己正在不同的页面间切换

希望这套 React 面试题和答案能帮你准备面试。祝一切顺利!

END -

作者:京程一灯授权转自公众号:前端先锋

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

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

相关文章

ASP.Net ListBox DropdownList 不同条目 设置 背景色 和 字体颜色

转载于:https://www.cnblogs.com/sjcatsoft/archive/2008/11/08/1329787.html

[jQuery] 根据表单的不同参数跳转不同的链接

说明 在实现前端的时候&#xff0c;我们有些需求是这样的&#xff1a; 1. 需要表单来向服务端get或post参数 2. 表单数据不只一个 3. 需要根据不同的提交的数据参数、类型等信息提交到不同 思路 把请求放到后端处理是可以的&#xff0c;但是显然这样处理会增加系统的复杂度&…

snipaste截图软件滚动截图_截图工具的逆袭,Snipaste 还可以这么玩

这是我们的历史文章。为让大家更好找到自己需要的软件&#xff0c;我们会在三条位置推送&#xff0c;那些备受关注的APP和软件。提到「截图」大家会想到什么呢&#xff1f;微信&#xff0c;QQ 或者 功能更加完善的截图工具&#xff1f;有想过「截图」可以这样用吗&#xff1f;还…

python的函数_Python 返回函数+匿名函数

返回函数 粗粗看了一遍学习资料&#xff0c;感觉返回函数的意思好理解&#xff0c;但是实际应用起来就有点麻烦了。 先捋一捋思路叭。 首先&#xff0c;高阶函数除了能接收函数作为参数外&#xff0c;也能将函数作为结果值返回。 函数作为返回值 拿 求和 做个简单的例子&#x…

简述WebService与.NET Remoting的区别及适应场合

为了能清楚地描述Web Service 和Remoting之间的区别,我打算从他们的体系结构上来说起: Web Service大体上分为5个层次: 1. Http传输信道 2. XML的数据格式 3. SOAP封装格式 4. WSDL的描述方式 5. UDDI 总体上来讲&#xff0c;.NET 下的 Web Service结构比较简单&#xff0c;也比…

[Golang]计算一个文件的MD5值

说明 在实际的开发过程中&#xff0c;总需要对文件进行md5加密的需求&#xff0c;在开发过程中&#xff0c;我就遇到了将表单文件MD5后再存储本地的需求。 解决 MD5的所需要的包在”crypto/md5”包中&#xff0c;需要先实例化一个MD5对象&#xff0c;然后在此基础上调用sum方法…

lisp捕捉垂足_定位-'Cal计算器

命令CAL&#xff0c;右键菜单选择“快速计算器”或CTRL8都可以打开计算器。使用 CAL 命令&#xff0c;用户可以&#xff1a;一.)获取点1.使用光标获取点用 cur 函数。程序会提示用户指定点并使用当前的 UCS 点的坐标值。cur 函数用于设置系统变量 lastpoint的值。2.获取交点ill…

plsql developer无监听程序_微信小程序支持分享到朋友圈啦!技术解读跟我来

千呼万唤始出来&#xff01;微信小程序页面分享到朋友圈的功能&#xff0c;终于在安卓系统灰度测试了&#xff01;目前只在安卓系统&#xff01;只在安卓系统&#xff01;只在安卓系统&#xff01;iOS系统还没有办法体验。首先&#xff0c;我们看一下官方文档的描述&#xff0c…

色彩的搭配

色彩的搭配是一门艺术&#xff0c;灵活运用它能让你的主页更具亲和力。当然这篇文章的内容还只限于理论&#xff0c;要想真的制作出漂亮的网页则需要灵活运用加上自己的创意才行。如果你有什么收获的话&#xff0c;可别忘了介绍给广大读者啊。 色彩的含义   色彩本身…

[读书笔记][golang]《go语言-云动力》

花了一些时间&#xff0c;读了樊剑虹的《go语言-云动力》&#xff0c;就这本书的整体情况来讲&#xff0c;还是值得读一读的&#xff0c;书中讲了一些另辟蹊径的东西&#xff0c;这可能是其他go语言书中不曾有的东西&#xff0c;但是就专业性来讲&#xff0c;是不值得推荐读的&…

mixin network_【译文】Mixin——以最高的安全性满足所有区块链资产的交易需求

一个免费的闪电般快速的数字资产端对端交易网络。01.概况Mixin 由一个理论上永久的内核、许多动态域和不同的多用途域扩展组成&#xff0c;以构成扩展的星形拓扑结构。Mixin Network 已经支持 BTC&#xff0c;BCH&#xff0c;ETH&#xff0c;EOS&#xff0c;ETC&#xff0c;SC&…

python脚本编程实例_C程序调用Python脚本的例子

下面我们一起来看看关于C程序调用Python脚本的例子&#xff0c;如果你对此有兴趣的希望此教程对各位同学会有所帮助。代码如下复制代码#include int main(){PyObject * g_pModule NULL;Py_Initialize(); //使用python之前&#xff0c;要调用Py_Initialize();这个函数进行初始化…

[golang]nil slice和empty slice的区别

前言 在开发的时候&#xff0c;会遇到对于nil slice和empty slice的问题&#xff0c;往往在声明了slice之后&#xff0c;在使用的时候却出现了问题。 问题 以下是错误的用法&#xff0c;会报数组越界的错误&#xff0c;因为只是声明了slice&#xff0c;却没有给实例化的对象&am…

socket通信需要网线连接吗_socket网络编程基础知识篇

网络通信是一种进程间通信(IPC,Inter-ProcessCommunication)&#xff0c;要求位于不同网络节点不同进程的通信双方必须遵循统一的通信协议方可实现。基于套接字(Socket)通信是应用在不同节点上的进程间通信的典型办法。1、基本原理1.1、 Socket API基本概念SocketAPI是TCP/IP网…

python柱形图代码_Python数据可视化:基于matplotlib绘制「条形图」

简介 条形图 &#xff08;bar chart&#xff09;是用宽度相同条形的高度或长短来表示数据多少的图形&#xff0c;可以横置或纵置。纵置时的条形图也称为 柱形图 &#xff08;column chart&#xff09;。 绘制条形图 1 import matplotlib.pyplot as plot 2 3 data [5., 25., 50…

Dreamweaver cs3快捷键大全

新建文档        CtrlN 打开一个 HTML文件   CtrlO或者将文件从[文件管理器]或[站点]窗口拖动到[文档]窗口中 在框架中打开       CtrlShiftO 关闭           CtrlW 保存           CtrlS 另存为         CtrlShiftS 检查链接   …

[JS][前端]修改文件input为button样式

问题描述 在开发的时候&#xff0c;遇到了需要提交表单文件的需求&#xff0c;但是原生<input>标签特别不好看&#xff0c;而且还有点击提交文件的提示&#xff0c;这样很影响美观&#xff0c;于是便想着更改<input>为<button>按钮。 解决方案 建立一个butto…

源码 连接mysql_MySql轻松入门系列————第一站 从源码角度轻松认识mysql整体框架图...

一&#xff1a;背景 1. 讲故事 最近看各大技术社区&#xff0c;不管是知乎&#xff0c;掘金&#xff0c;博客园&#xff0c;csdn基本上看不到有小伙伴分享sqlserver类的文章&#xff0c;看样子这些年sqlserver没落了&#xff0c;已经后继无人了&#xff0c;再写sqlserver是不可…

ThinkPHP5.1中使用Redis来缓存

问题 在thinkphp5.1项目中需要引入Redis&#xff0c;安装redis后在tp5.1写入相关的操作代码后却一直报错&#xff0c;可能出现的问题如下&#xff1a; 1. 安装不正确&#xff0c;即redis没正常运行 2. 没有添加php_redis驱动扩展 3. php.ini修改位置不正确 4. tp5.1中配置代…

python网页爬虫例子_Python网络爬虫 - 一个简单的爬虫例子

下面我们创建一个真正的爬虫例子 爬取我的博客园个人主页首页的推荐文章列表和地址 scrape_home_articles.py from urllib.request importurlopenfrom bs4 importBeautifulSoupimportre html urlopen("http://www.cnblogs.com/davidgu") bsObj BeautifulSoup(html, &…