常见react面试题汇总
已经开源地址：https://github.com/nanhupatar...关注我们团队：React 中 keys 的作用是什么？Keys 是 React 用于追踪哪些列表中元素被修改、被添加或者被移除的辅助标识。render () { return ( <ul> {this.state.todoItems.map(({item, key}) => { return <li key={key}>{item}</li> })...
2024-01-10
React 经典面试题
React 经典面试题React 17.0 为什么要废除三个生命周期。getDerivedStateFromProps 以前我们会使用componentWillReceiveProps来做判断，如果前后props不相等，然后就setState等等。这个生命周期的出现更加简单，我们可以直接很方便的实现这中场景，getDerivedStsteFromProps方法是一个static方法，属于React.component类的方法，...
2024-01-10
react打断点调试
1.2.3..4.5.6. (2) F8继续调试；(3) F11进入Javascript中的函数体调试；(4) F10 进入下一行；f10是执行下一行js代码f11是进入当前行方法 f8是让代码继续运行...
2024-01-10
react--调试工具
谷歌浏览器：点击-》更多工具-》扩展程序-》网上应用店，搜索react，找到react developer tools 下载安装。在谷歌浏览器运行react开发的项目。图标变色表示底层代码是react用开发的。然后点击components或者react。最后可以看到的信息...
2024-01-10
关于react跨域问题
我和别人做的一个网站，我负责写后端，他负责写前端。有个更新头像接口一直报错，帮忙看一下什么问题。我的java代码@Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping("/**").allowedOrigins("http://localhost:8000").allowedMethods("GET", "POST", "OPTIONS", "PUT","DELETE") ...
2024-01-10
react里面引入图片
引入图片确实走了很多的坑，开始的认知里，所有静态页面都需要放在public里面能执行，代码是这样的css.back{ background-image: url('/images/homeBackImg.png');}图标路径my-app├── README.md├── node_modules├── package.json├── .gitignore├── public│ └── images│ └── homeBackImg.png│ └...
2024-01-10
面试题：react和vue的区别分析
react和vue是什么？有啥区别吗？三大框架之二，大家应该都不会陌生，都有学习过或者开发中使用。但是他们到底有啥区别呢？这个就是我们这篇文章所需探讨并学习的。开始！MVC 和 MVVM首先，来说明下这些字母代表的含义M：Model 模型V：View 视图C：Controller 控制器VM：ViewModel 视图模型首先说下...
2024-01-10
关于React面试题及答案汇总
1、redux中间件中间件提供第三方插件的模式，自定义拦截action -> reducer 的过程。变为 action -> middlewares -> reducer。这种机制可以让我们改变数据流，实现如异步 action ，action 过滤，日志输出，异常报告等功能。常见的中间件：redux-logger：提供日志输出redux-thunk：处理异步操作redux-promise：处理异步操作...
2024-01-10
react页面间传递参数
react-router页面跳转，带请求参数this.context.router.push({pathname:'/car_datail',state:{item:"hello"}});pathname为跳转页面路径，可将跳转时要传递的参数放入state中在第二个页面使用this.props.location.state得到上一页面传递参数react-router v4中：this.context.router.history.push()import React, { Component, PropTy...
2024-01-10
记react 使用的问题
问题描述： 1. react组件中，组件中正执行某个请求，请求未结束时卸载该组件，请求使用promise，此时promise状态为pedding， 组件componentWillUnMount已经执行; 2. 重载该组件后，请求的promise会继续执行， 当时测试环境前提： TestComponent 父组件并未卸载代码如下class TestComponent extends Component { ...
2024-01-10
React高频面试题，值得珍藏！
说明+感悟：以下所有面试题在本人面试时基本都有出现，当初我在面试时和很多朋友一样，网上搜寻了大量的面试题，疯狂的背诵。说实话，很多面试题确实会被问道，你回答的可能也很标准，但不一定是面试官想要的答案。回答出面试官想要的答案尤为重要。本篇内容，我希望给大家带来的是知识...
2024-01-10
react里面怎么引入样式
模块样式在刚开始构建好框架的时候，准备开始写业务，在第一个页面的时候就会碰到怎么引入样式的问题，踩过一些坑，不是使用style，头部也不需要另外取名，直接引入css就可以，引入方式是这样<div className='topHead back fs14'> <img src='/images/highLevel.png' className='levelSize'/></div>使用className的形式引...
2024-01-10
react 开发中的问题简记
1、什么时候用props 什么时候用state ？ 不能使用props：当页面组件存在URL跳转问题时候，原因：若单独刷新，他会报错，拿不到前面的数据； 使用props场景：当组件为页面组件的一部分即没有专有的URL配置的时候可以使用。 state：保持当前状态请求一般都会放在state里。2、开发中遇到的问...
2024-01-10react基本安装与测试示例
本文实例讲述了react基本安装与测试。分享给大家供大家参考，具体如下：语法特点：声明式编码：只在意结果不在意过程组件化编码：html,css,js的集合单向数据流：vue也是单向数据流，有一个双向绑定功能。支持服务器端编写高效：先生成一个虚拟DOM，然后在DOM中操作，再一次性返回到真实界面...
2024-01-10
react两年经验，常见面试题（自己整理中）
一、HTML5面试题webpack和gulp的区别gulpgulp强调的是前端开发的工作流程，我们可以通过配置一系列的task，定义task处理的事务（例如文件压缩合并、雪碧图、启动server、版本控制等），然后定义执行顺序，来让gulp执行这些task，从而构建项目的整个前端开发流程。PS：简单说就一个Task Runnerwebpackwebpack...
2024-01-10
react项目开发中遇到的问题
前言作为一个前端爱好者来说，都想在react上一试生手，那么在搭建react项目开发时，肯定会有这样或者那样的问题，尤其是对初学者来说，下面就个人在开发过程中遇到的问题总结一下，好在有google帮我解决了各种问题。本人项目的技术栈为react+redux+router+ant ui +webpack。export * from 'x-module'在配置babel-pl...
2024-01-10
react界面跳转，滚动到顶部
在使用react-router-dom时，我们经常会遇到路由切换时滚动到浏览器顶部的问题。很多时候我们需要的是滚动到顶部“Scroll to top”，因为发现好像所有的单页面都有一个通病，就是页面进行跳转时，当前所在的位置和你上个界面所在的位置一样，显然这样对于用户来说体验不是很好。 我们可以使用使用...
2024-01-10
开发中遇到的react问题记录
在用react开发的时候遇到了一个问题：在实现react父子组件通信时，我在父组件A中调用了子组件B，并向子组件B传入父组件A的方法和state里的2个变量。在子组件B中接收到父组件A传入的note和beats变量后，存入子组件的state中，子组件通过调用父组件的方法改变父组件的state值，使得父组件render重新渲染...
2024-01-10
必须要会的 50 个React 面试题
如果你是一位有抱负的前端程序员并准备面试，那么这篇文章很适合你。本文是你学习和面试 React 所需知识的完美指南。JavaScript 工具缓慢而稳定地在市场中扎根，对 React 的需求呈指数级增长。选择合适的技术来开发应用或网站变得越来越有挑战性。其中 React 被认为是增长最快的 Javascript 框架。截...
2024-01-10
react关于循环插入节点的问题
有这样一个问题蓝色背景的div是一个数组循环出来的，下面的灰色背景div，是我点击展开显示的，点击收起再收起，我希望把他放在自动转交的div下面，各位有有什么思路么回答不考虑遮挡的话 可以position，定位到点击的元素块附近如果要占位置的话， 就带着内容一起循环，只是一开始不存在。...
2024-01-10
多种解决react中跨域问题方案
多种解决react中跨域问题方案在网上看到了多种解决react跨域的方法，但是在实际的项目中并不是所有的方法都是可行的。一、最简单的操作在package.json中加入"proxy": "http://localhost:8000"然后你页面中的请求fetch('/api/userdata/')就会转发到proxy中的地址也就是真实的请求是http://0.0.2.89:7300/api/userdata/，而且也...
2024-01-10
React：解决跨域问题
安装http-proxy-middlewareyarn add -D http-proxy-middleware;配置在src文件夹下创建『setupProxy.js』文件，写入以下内容const proxy = require('http-proxy-middleware');// 注意：文件名后缀必须是jsmodule.exports = function (app) { app.use( '/api', proxy.createProxyMiddleware({ ...
2024-01-10
求大佬来解释一下这个react问题
this.props.detailInfo是个对象，对象里面有name和decription字段,为什么我已经赋值到新的变量里了，我改变这个新的变，为什么this.props.detailInfo也会跟着改变!求大神解释一下!非常迷惑本人QQ885150804回答数组，对象，类，他们的赋值都是地址引用，你把props的值复制给detailInfo相当于将detailInfo的值的地址设置为...
2024-01-10
react首屏页面加载性能优化记录
能按需加载的东西、尽量配置一下。一、webpack devtooldevtool的值有好几个，根据自己的情况和环境的不同，选择合适的，一般打包的时候可以用：eval 、eval-source-map或者cheap-eval-source-map。我这边打包时，直接设置成了：‘eval ’。具体可以去官网查看每个值的作用~二、如果使用的是antd框架，通过打包...
2024-01-10
学习React中遇到的问题
1.执行eject后，再次启动项目报错情景：使用create-react-app搭建了项目，启动没有问题，然后执行 $ yarn eject 暴露出webpack配置文件等，再次 $ yarn start 启动报错提示：Cannot find module 'babel-loader'。解决办法：执行 $ yarn install 重新安装一遍依赖即可解决。2.配置less和引入antd后报错情景：项目中先eject暴露...
2024-01-10
