2022必备react面试题 附答案

2023-11-15

2022必备react面试题

1. React的严格模式如何使用,有什么用处?

StrictMode 是一个用来突出显示应用程序中潜在问题的工具。与 Fragment 一样,StrictMode 不会渲染任何可见的 UI。它为其后代元素触发额外的检查和警告。 可以为应用程序的任何部分启用严格模式。例如:

import React from 'react';
function ExampleApplication() {
   
  return (
    <div>
      <Header />
      <React.StrictMode>        
        <div>
          <ComponentOne />
          <ComponentTwo />
        </div>
      </React.StrictMode>      
      <Footer />
    </div>
  );
}
复制代码

在上述的示例中,不会对 HeaderFooter 组件运行严格模式检查。但是,ComponentOneComponentTwo 以及它们的所有后代元素都将进行检查。

StrictMode 目前有助于:

  • 识别不安全的生命周期
  • 关于使用过时字符串 ref API 的警告
  • 关于使用废弃的 findDOMNode 方法的警告
  • 检测意外的副作用
  • 检测过时的 context API

前端react面试题详细解答

2. 在React中遍历的方法有哪些?

(1)遍历数组:map && forEach

import React from 'react';

class App extends React.Component {
   
  render() {
   
    let arr = ['a', 'b', 'c', 'd'];
    return (
      <ul>
        {
   
          arr.map((item, index) => {
   
            return <li key={
   index}>{
   item}</li>
          })
        }
      </ul>
    )
  }
}

class App extends React.Component {
   
  render() {
   
    let arr = ['a', 'b', 'c', 'd'];
    return (
      <ul>
        {
   
     
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

2022必备react面试题 附答案 的相关文章

  • React:如何从 Material-UI TextField 组件获取值

    我有一个小型应用程序 其中包含 Form 组件 SubmitButton 组件和我的父组件 App js 当用户单击提交按钮时 我想获取表单组件上 3 个字段的值并将它们传递给我的 App js 组件 我不确定如何使用触发事件onClick
  • 当来源为 http 且目标 url 为 https 时,如何在本地网络中发出 POST 请求?

    我需要从 POS 销售点 http 向支付终端 https 发出 POST 请求 它们连接在我的本地网络中 当我向邮递员发出请求时 一切正常 但每当我从 POS 发出请求时 我都会收到错误 POSThttps 我的IP地址 8443 nex
  • Node.js req.body 在表单数据内容类型中未定义

    在这里 我为这个表单数据传递 API 创建了一个小演示 现在我正在使用邮递员检查此 API 但我没有收到任何数据 Code const http require http const express require express cons
  • Node.js 应用程序中的系统托盘图标

    这是我的 node js 应用程序中需要的 系统托盘图标 在应用程序工作期间更改此图标 单击图标后的菜单 创建带有登录 密码字段和确认按钮的窗口 这是我发现的 https github com appjs appjs https githu
  • 如何为谷歌材料条形图制作动画

    我正在反应项目中绘制反应谷歌条形图 材料图表 并且我正在尝试制作动画 我读过这种图表不支持动画 但我需要这样做 必须有任何方法可以做到这一点 我很难认为新的东西比旧的东西更糟糕 有人知道我该怎么做吗 我尝试了很多不同的方法 但没有任何效果
  • 将对象传递给jquery中的回调函数

    我最近正在开发小型聊天模块 该模块需要不断检查服务器是否有新消息 我正在向服务器发送 ajax 请求 服务器将保持连接 直到找到新消息 长轮询 Code var chatController function other variable
  • jqGrid如何将额外的类应用于标题列

    我想在特定列上应用一个额外的类 我知道通过在 colModel 中指定这一点对于行是可能的 但这些类仅应用于 结果行 中的列 而不应用于标题 我想要达到的是通过简单的类名隐藏较小视口的特定列 与 Twitter Bootstrap 一起使用
  • 使用 document.getElementById().style.height javascript 从 css 获取值

    请提供有关这个谜团的见解 我试图通过以下方式从 div 框中获取高度值 var high document getElementById hintdiv style height alert high 如果该属性包含在 div 标记中 我可
  • 如何配置 StrongLoop LoopBack MongoDB 数据源以部署到 Heroku

    我正在使用 LoopBack 版本 1 6 并使用以下数据源配置运行本地 mongoDB 服务器进行开发 mongodb defaultForType mongodb connector loopback connector mongodb
  • JavaScript 附加和前置与 jQuery 附加和前置

    QA Style 我最近读了一篇文章 里面说JavaScript已经实现了append and prepend受 jQuery 启发的方法 这对我来说是一个新知识 因为据我所知 要附加一个元素 我必须使用element appendChil
  • 在 AMP 中包含自定义 JavaScript 的最佳方式

    我阅读了有关脚本标记的所有文档 但找不到如何在 AMP HTML 中包含自定义 JavaScript 我知道
  • Karma 测试报告运行速度快,但实际上运行速度慢

    最好的解释是a video https youtu be Zwwi01JuPrQ 或参见下面的 gif 您会注意到 Karma 进度报告器报告测试只需要几毫秒 但显然需要相当长的时间 我在推特上提到了这一点 https twitter co
  • 如何判断CKEditor是否已加载?

    如何确定 CKEditor 是否已加载 我查看了API文档 但只能找到loaded事件 我想检查 CKEditor 是否已加载 因为如果我第二次加载它 我的文本区域就会消失 The loaded活动对我不起作用 instanceReady
  • 将纬度/经度转换为 X/Y,以便在美国地图图像上进行阿尔伯斯投影

    我正在尝试使用 C 或 Javascript 将纬度 经度转换为 X Y 坐标 以将带有 CSS 的 div 左 上 定位到美国地图的背景图像上 美国的标准地图投影是阿尔伯斯投影 如下所示 但 StackOverflow 仅提供参考基本墨卡
  • 添加 sigma.js 导航按钮

    我是 javascript 和 sigma js 的新手 我试图让导航按钮在画布中向上 向下 向左 向右滚动 就像发现的那样here http jcml fr jacomyal osdc2012 demo 到目前为止 我有一个简单的例子 我
  • 如何获取元素相对于当前屏幕位置的偏移量?

    我正在尝试用纯 Javascript 重构所有 jQuery 除了非常具体的值之外 一切都正常工作 根据此代码的浏览器供应商 我得到了不同的值 对于 jQuery 我会使用 var topSelected figure offset top
  • RegisterClientScriptCode 在部分回发后不起作用

    以下代码行位于 SharePoint 网站的用户控件中 ScriptManager RegisterClientScriptBlock this this GetType jquery144 false ScriptManager Regi
  • Angular 计算 HTML 中的百分比

    我试图在 HTML 中显示百分比值 如下所示 td myvalue totalvalue 100 td 它可以工作 但有时它会给出一个很长的小数 这看起来很奇怪 如何四舍五入到小数点后两位 有更好的方法吗 您可以使用过滤器 如下所示杰夫约翰
  • gulp-uglify 不会保留文件顺序

    当我使用吞咽丑化 https github com terinjokes gulp uglify为了缩小 Javascript 文件 顺序变得混乱 可以说我让这个任务按预期工作 var gulp require gulp var renam
  • Bootstrap $('#myModal').modal('show') 不起作用

    我不知道为什么 但所有模态功能都不适用于我 我检查了版本和负载 它们都很好 我不断收到此错误消息 Uncaught TypeError modal is not a function 对于隐藏我已经找到了替代方案 代替 myModal mo

随机推荐

  • Oracle的大字段Clob类型的查询,Clob转为varchar展示

    1 Oracle中将clob字段数据转化为字符串 借鉴学习地址 Oracle的CLOB大数据字段类型 Grand Jon 博客园 查询 将CLOB转成字符类型 采用 dbms lob substr 查询 将CLOB转成字符类型 SELECT
  • 亚稳态学习小结

    亚稳态学习小结 一 亚稳态是什么 要知道亚稳态的定义 首先要知道时钟上升沿采样中的建立时间 setup time 和保持时间 hold time 1 1 建立时间 Tsu 保持时间 Th 建立时间 在触发器时钟上升沿到来之前 数据需要保持稳
  • xssgame靶场通关记录

    文章目录 靶场地址 第一关 第二关 第三关 第四关 第五关 第六关 第七关 第八关 html编码绕过 第九关 href属性js伪协议 第十关 第十一关 第十二关 第十三关 第十四关 Angular JS 第十五关 url编码 靶场地址 国光
  • UI设计原则背后的认知心理学 优漫动游

    了解人的感官和大脑是如何工作的 去衡量及判断那些设计原则更靠谱 UI设计师需要确定哪个设计原则更适用于给定的环境 从而优选应用 UI设计师必须深思熟虑 而不是盲目的应用设计原则 应该理解其基本原则并有过应用经验的人来使用和诠释 UI设计原则
  • vue3中使用echarts实现自定义纹理3d地图

    效果图 npm下载echarts 在main文件中全局引入 npm install echarts S import as Echarts from echarts app config globalProperties Echarts E
  • 使用htmlWebpackPlugin添加代码版本信息

    不知道你是不是这样的场景哈 或者曾经是 你提交完代码 部署然后测试去测 测试说你这个bug改了吗 怎么还是一样 然后你就纳闷 改过了啊代码也提交了 然后你自己去点一遍验证提交的代码有没有部署上去 这是一个痛点 可能也都习惯了哈 其实 这里有
  • OrCAD Capture学习笔记

    1 OrCAD Capture文件类型 OrCAD Capture是Cadence公司用来进行原理图绘制的一个EDA软件 能用这个软件打开的常用的几个文件后缀名为 dsn opj olb lib net 这些文件后缀具体表示的意思如下 这些
  • php 万能密码,网络安全系列之十 万能密码登录网站后台

    在登录网站后台时 有一个比较古老的 万能密码 漏洞 即利用一个我们精心构造的用户名 即使不用输入密码 也可以登录后台 其原理仍属于SQL注入的范畴 假设数据库中存放用户信息的表是admin 其中存放用户名的字段是username 存放密码的
  • git报错ssh: connect to host github.com port 22: Connection timed out

    碰到了git拉代码时报出的一个错误 通过查阅资料尝试了几种方法之后解决了 在这做个记录 首先需要检查一下SSH是否能够连接成功 输入以下命令 ssh T git github com 若还是报这个错ssh connect to host g
  • Solidity中的pure和view修饰符的区别是什么?什么时候添加pure和view修饰符?

    Solidity是一种用于编写智能合约的编程语言 它被广泛应用于以太坊区块链上的智能合约开发 在Solidity中 有两种函数修饰符 即 pure 和 view 它们被用来指示函数的行为 这篇文章将深入探讨 pure 和 view 的含义
  • PyTorch中使用预训练的模型初始化网络的一部分参数(增减网络层,修改某层参数等) 固定参数

    在预训练网络的基础上 修改部分层得到自己的网络 通常我们需要解决的问题包括 1 从预训练的模型加载参数 2 对新网络两部分设置不同的学习率 主要训练自己添加的层 一 加载参数的方法 加载参数可以参考apaszke推荐的做法 即删除与当前mo
  • 查看 elasticsearch版本号

    查看 elasticsearch版本号 输入命令 curl XGET localhost 9200 得到 name OmUcqLr cluster name elasticsearch cluster uuid AQHIcDW Q9K80U
  • 使用U盘重装MacBook Air时用到的工具和镜像

    主要是工具和镜像 非重装教程 前言 工具 镜像 前言 我之前没接触过苹果笔记本 设备是邻居的白苹果 近期因为双系统中的windows出故障了 所以索性帮他重装 用U盘重装MacBook Air教程网上有一堆 大家应该都能搜索到 主要是工具和
  • aanet

    AANet feature extractor AANetFeature conv1 Sequential 0 Conv2d 3 32 kernel size 7 7 stride 3 3 padding 3 3 bias False 1
  • VSCODE:终端界面简洁化和cmd.exe界面显示

    最近在配置vscode 想用来编写一些c和c 算法文件 编写helloword cpp文件 运行发现程序输出结果显示在终端界面 且含有一长串复杂的无用字符 因此考虑简化这个终端界面 在网上查询了众多教程 大部分都是修改launch json
  • 如何使用 Serverless 做架构和项目管理—— 三年全栈经验总结

    本文是从项目工程角度来讲解的 技术角度请参看另一个文章 真实项目代码教你四步扔了传统服务器 让你优雅使用Serverless做全栈开发 https zhuanlan zhihu com p 本文汇总了我的多个Serverless的全栈项目实
  • [c++]力扣303+304 区域和检索 二维区域和检索

    最近开始重新刷题 从链表开始 第一部分是前缀和 分为一维数组前缀和和高维数组前缀和 abandon 前缀和数组是牺牲空间换时间的方法 为了解决频繁访问数组某区间的问题 先构造出从开始到当前位置的元素的和 储存在前缀和数组中 查询的时候直接查
  • 小波神经网络(WNN)的实现(Python,附源码及数据集)

    文章目录 一 理论基础 1 小波神经网络结构 2 前向传播过程 3 反向传播过程 4 建模步骤 二 小波神经网络的实现 1 训练过程 WNN py 2 测试过程 test py 3 测试结果 4 参考源码及实验数据集 一 理论基础 小波神经
  • Java设计模式-单例模式

    模式定义 确保一个类最多只有一个实例 并提供一个全局访问点 单例模式分为饿汉式和懒汉式 懒汉式单例模式 在类加载时不初始化 饿汉式单例模式 在类加载时就完成了初始化 所以类加载比较慢 但获取对象的速度快 饿汉式 线程安全 饿汉式单例模式 线
  • 2022必备react面试题 附答案

    2022必备react面试题 1 React的严格模式如何使用 有什么用处 StrictMode 是一个用来突出显示应用程序中潜在问题的工具 与 Fragment 一样 StrictMode 不会渲染任何可见的 UI 它为其后代元素触发额外