前端面试题React
前端面试题React
普通网友
这个作者很懒,什么都没留下…
展开
-
React面试题目录汇总
2021年11月10日(更)[react] 什么时候使用状态管理器?[react] render函数中return如果没有使用()会有什么问题?[react] 说说Context有哪些属性?[react] 你有使用过React Intl吗?[react] 除了实例的属性可以获取Context外哪些地方还能直接获取Context呢?[react] childContextTypes是什么?它有什么用?[react] 为什么React并不推荐我们优先考虑使用Context?[re原创 2021-11-11 13:08:11 · 1380 阅读 · 11 评论 -
[react] 怎样在react中创建一个事件?
[react] 怎样在react中创建一个事件?var EventEmitter = require('events').EventEmitter;class App extends Component{constructor(props){super(props);}componentDidMount(){this.itemChange = emitter.addListener('ItemChange',(msg,data)=>console.log(msg));//注册事件原创 2021-11-28 01:00:00 · 293 阅读 · 1 评论 -
[react] 浏览器为什么无法直接JSX?怎么解决呢?
[react] 浏览器为什么无法直接JSX?怎么解决呢?因为浏览器只能解决原生的JS代码,jsx不属于原生的js,它是类似于html的语法,然后转化成一个js对象。这个转化的过程就是通过Babel的@babel/plugin-transform-react-jsx插件实现的。个人简介我是歌谣,欢迎和大家一起交流前后端知识。放弃很容易,但坚持一定很酷。欢迎大家一起讨论主目录与歌谣一起通关前端面试题...原创 2021-11-26 13:00:00 · 1069 阅读 · 2 评论 -
[react] react中除了在构造函数中绑定this,还有别的方式吗?
[react] react中除了在构造函数中绑定this,还有别的方式吗?1:函数定义的时候使用箭头函数2:函数调用是使用bind绑定this个人简介我是歌谣,欢迎和大家一起交流前后端知识。放弃很容易,但坚持一定很酷。欢迎大家一起讨论主目录与歌谣一起通关前端面试题...原创 2021-11-29 03:15:00 · 448 阅读 · 0 评论 -
[react] 在使用react过程中你都踩过哪些坑?你是怎么填坑的?
[react] 在使用react过程中你都踩过哪些坑?你是怎么填坑的?组件不像Vue一样有(beforeRouteLeave, beforeRouteEnter)路由守卫 Hooks中的闭包渲染问题import { useState } from 'react';const Demo = () => { const [count, setCount] = useState(0); const onAdd = () => { setTimeout(()原创 2021-11-29 02:00:00 · 306 阅读 · 0 评论 -
[react] react兄弟组件如何通信?
[react] react兄弟组件如何通信?状态提升,通过父组件的state和方法传递到两个子组件个人简介我是歌谣,欢迎和大家一起交流前后端知识。放弃很容易,但坚持一定很酷。欢迎大家一起讨论主目录与歌谣一起通关前端面试题...原创 2021-11-27 03:30:00 · 435 阅读 · 1 评论 -
[react] 说说react的生命周期有哪些?
[react] 说说react的生命周期有哪些?装载阶段组件第一次被渲染时的阶段,这一阶段相关的生命周期函数有:constructorcomponentWillMountrendercomponentDidMount更新阶段如果组件中的 state 或者 props 发生了改变,React 就会更新该组件,此时会调用更新阶段中相关的生命周期函数:componentWillReceivePropsshouldComponentUpdatecomponentWillUpdateren原创 2021-11-29 02:00:00 · 386 阅读 · 0 评论 -
[react] 说说你喜欢react的原因是什么?它有什么优缺点?
[react] 说说你喜欢react的原因是什么?它有什么优缺点?原因: All in JS,没有过多的语法糖、API等,核心思想就是props、state、生命周期、hooks,使用JS的技能就能解决和解释一切现象 优点: 使用了虚拟DOM,高性能 JSX: 类似HTML的语法方便的构建UI MVVM,数据模型可以自动的响应在UI上 活跃的生态圈 缺点: React非框架,不同的开发人员有不同的写法,对开发人员要求较高 个人简介我是歌谣,欢迎和大家一起交流前后端.原创 2021-11-30 03:45:00 · 256 阅读 · 0 评论 -
[react] 如何解决引用类型在pureComponent下修改值的时候,页面不渲染的问题?
[react] 如何解决引用类型在pureComponent下修改值的时候,页面不渲染的问题?不要在state或者props当中修改数组或者对象通过使用es6的assign方法或者数组的扩展运算符或者使用第三方库,强制返回一个新的对象(页面为什么不渲染)是因为组件内容是采用的浅拷贝,对象的值虽然发生改变,但是引用的地址没有发生改变个人简介我是歌谣,欢迎和大家一起交流前后端知识。放弃很容易,但坚持一定很酷。欢迎大家一起讨论主目录与歌谣一起通关前端面试题...原创 2021-11-29 05:00:00 · 386 阅读 · 0 评论 -
[react] 你觉得react上手快不快?它有哪些限制?
[react] 你觉得react上手快不快?它有哪些限制?相对vue来说不快。限制 需要学习JSX 需要工程化的配置 需要对原生JavaScript有相当的掌握 react只是一个UI层面的库,像vue内置了动画处理、keep-alive等功能,react则需要去找第三方库解决 个人简介我是歌谣,欢迎和大家一起交流前后端知识。放弃很容易,但坚持一定很酷。欢迎大家一起讨论主目录与歌谣一起通关前端面试题...原创 2021-11-30 02:15:00 · 429 阅读 · 0 评论 -
[react] 和Component两者的区别是什么
[react] 和Component两者的区别是什么组件的state或者props更新都会触发render(),同时也会导致子组件render()重新渲染;当我们不想子组件更新时,需要手动在shouldUpdateComponent当中返回false;pureComponent帮我们做了这部分工作个人简介我是歌谣,欢迎和大家一起交流前后端知识。放弃很容易,但坚持一定很酷。欢迎大家一起讨论主目录与歌谣一起通关前端面试题...原创 2021-11-29 03:45:00 · 371 阅读 · 0 评论 -
[react] react是什么?它的主要特点是什么?
[react] react是什么?它的主要特点是什么?React是用于构建用户界面的库。特点:组件化,增强复用性 数据到视图的单向绑定,更安全 数据的单项传递流 高性能个人简介我是歌谣,欢迎和大家一起交流前后端知识。放弃很容易,但坚持一定很酷。欢迎大家一起讨论主目录与歌谣一起通关前端面试题...原创 2021-11-29 00:45:00 · 226 阅读 · 0 评论 -
[react] 在react中怎样改变组件状态,以及状态改变的过程是什么?
[react] 在react中怎样改变组件状态,以及状态改变的过程是什么?使用this.setState改变组件的状态 改变的过程中,React Fiber Reconciler遍历了整个Fiber Tree,得到了最新的DOM diff结果,并把这个结果应用到真实的DOM上。同时相应的生命周期(static getStateFromProps shouldComponentupdate render getSnapshotBeforeUpdate componentDidUpdate)也在相应的时机原创 2021-11-29 00:30:00 · 155 阅读 · 0 评论 -
[react] 在react中怎样改变组件状态,以及状态改变的过程是什么?
[react] 在react中怎样改变组件状态,以及状态改变的过程是什么?使用this.setState改变组件的状态 改变的过程中,React Fiber Reconciler遍历了整个Fiber Tree,得到了最新的DOM diff结果,并把这个结果应用到真实的DOM上。同时相应的生命周期(static getStateFromProps shouldComponentupdate render getSnapshotBeforeUpdate componentDidUpdate)也在相应的时机原创 2021-11-29 00:45:00 · 294 阅读 · 0 评论 -
[react] react怎么拿到组件对应的DOM元素?
[react] react怎么拿到组件对应的DOM元素?在Class组件中import React from 'react';class CComponent extends React.Component { refDiv = React.createRef(); componentDidMount () { console.log(this.refDiv.current) } render () { return <div> <di原创 2021-11-26 02:15:00 · 1254 阅读 · 0 评论 -
[react] 你用过react版本有哪些?
[react] 你用过react版本有哪些?react@17.0.2个人简介我是歌谣,欢迎和大家一起交流前后端知识。放弃很容易,但坚持一定很酷。欢迎大家一起讨论主目录与歌谣一起通关前端面试题原创 2021-11-29 00:45:00 · 698 阅读 · 0 评论 -
[react-router] React-Router 3和React-Router 4有什么变化?添加了什么好的特性?
[react] React-Router 3和React-Router 4有什么变化?添加了什么好的特性?React-Router 4 从设计思想上进行改变,引入动态路由,将路由进行了拆分,将其放到了各自的模块中,不再有单独的 router 模块,充分体现了组件化的思想,更加贴合 React 的思想。具体表现:包含式路由与exact 在之前的版本中,在 Route 中写入的 path,在路由匹配时是独一无二的,路由的嵌套体现在 <Route> 组件的嵌套规则上 v4 版本则有了原创 2021-11-26 08:00:00 · 283 阅读 · 2 评论 -
[react] 你知道Virtual DOM的工作原理吗?
[react] 你知道Virtual DOM的工作原理吗?Virtual DOM是什么:虚拟DOM是真实DOM的javascript对象的映射 Virtual DOM的工作原理:数据驱动视图更新这个过程中,首先会改变虚拟DOM对象,一个视图的更新周期,首先会简单新的虚拟DOM和旧的虚拟DOM的差异,最后比较处所有的差异,即是更新前后DOM的差异,最后把这个差异应用到真实的DOM上。 为什么Virtual DOM能提高性能: 频繁的更新DOM会引起性能问题,但是因为虚拟DOM是纯js,所以频繁的更新虚原创 2021-11-27 01:00:00 · 262 阅读 · 0 评论 -
[react] 简要描述下你知道的react工作原理是什么?
[react] 简要描述下你知道的react工作原理是什么?我理解的核心部分:通过虚拟DOM表达真实DOM 通过数据驱动更新虚拟DOM进而更新真实DOM(MVVM) 有一套完整并且合理的 DOM Diff 算法(现在 React 17 是基于 lane 架构来调度的 Fiber Diff 算法)来提高 diff 性能,进而提高应用性能。同时 React 实现了数据驱动与渲染平台剥离,通过统一的调度与Diff 算法,可以引用到不同的渲染环境,如 Native 、浏览器、Canvas 等个人简原创 2021-11-26 02:45:00 · 258 阅读 · 0 评论 -
[react] 说说你对声明式编程的理解?
[react] 说说你对声明式编程的理解?声明式编程 区别于命令式编程,它的特点就是我告诉计算机做什么,但是没有告诉你怎么做.个人简介我是歌谣,欢迎和大家一起交流前后端知识。放弃很容易,但坚持一定很酷。欢迎大家一起讨论主目录与歌谣一起通关前端面试题...原创 2021-11-25 11:30:00 · 211 阅读 · 0 评论 -
[react] react中可以在render访问refs吗?为什么?
[react] react中可以在render访问refs吗?为什么? <> <span id="name" ref={this.spanRef}>{this.state.title}</span> <span >{ this.spanRef.current ? '有值' : '无值' }</span> </>不可以,render 阶段 DOM原创 2021-11-28 01:15:00 · 471 阅读 · 0 评论 -
[react] react的mixins有什么作用?适用于什么场景?
[react] react的mixins有什么作用?适用于什么场景?1.mixin的作用是抽离公共功能,不存在渲染dom的需要,所以它没有render方法。如果你定义了render方法,那么他会和组件的render方法冲突而报错。2.mixin不应该污染state,所以他也没有 setState 方法。3.mixin应该只提供接口(即方法),不应该提供任何属性。个人简介我是歌谣,欢迎和大家一起交流前后端知识。放弃很容易,但坚持一定很酷。欢迎大家一起讨论主目录与歌谣一起通关前端原创 2021-11-25 18:00:00 · 386 阅读 · 0 评论 -
[react] react与angular、vue有什么区别?
[react] react与angular、vue有什么区别?Angular以前有接触过,我的感觉是,这不像React和Vue一样是构架+补充库(比如需要另外的全家桶来配合使用),它的功能非常完整,更像是一个框架,往里面填充就行,里面什么功能都有集成进去,缺点也明显,比较大,运行速度不如另两个快。Vue呢,和react很像,但是又不太一样,比如前者基于模板语法和Vue实例,后者基于组件和类库,都可以在虚拟DOM中进行双向数据的绑定,生命周期也是类似的。个人简介我是歌谣,欢迎和大家一起交流前后.原创 2021-11-25 08:00:00 · 268 阅读 · 2 评论 -
[react] 请描述下事件在react中的处理方式是什么?
[react] 请描述下事件在react中的处理方式是什么?所有时间都挂载到 document 上,然后捕获对应的 dom。 类似事件委托个人简介我是歌谣,欢迎和大家一起交流前后端知识。放弃很容易,但坚持一定很酷。欢迎大家一起讨论主目录与歌谣一起通关前端面试题...原创 2021-11-26 03:00:00 · 241 阅读 · 0 评论 -
[react] react父子组件如何通信?
[react] react父子组件如何通信?props个人简介我是歌谣,欢迎和大家一起交流前后端知识。放弃很容易,但坚持一定很酷。欢迎大家一起讨论主目录与歌谣一起通关前端面试题原创 2021-11-25 03:15:00 · 132 阅读 · 0 评论 -
[react] react有几种构建组件的方式?可以写出来吗?
[react] react有几种构建组件的方式?可以写出来吗?1.无状态函数式组件function HelloComponent(props, /* context */) {return <div>Hello {props.name}</div>}ReactDOM.render(<HelloComponent name="Sebastian" />, mountNode)2.React.createClassvar InputContr..原创 2021-11-25 12:30:00 · 176 阅读 · 2 评论 -
[react] createElement与cloneElement两者有什么区别?
[react] createElement与cloneElement两者有什么区别?createElement是创建一个React元素,jsx即是这个函数的语法糖;它的函数签命是React.createElement(type, [props], [...children]) cloneElement是拷贝一个React元素,可选择在修改它的props后,再返回一个新的React元素;它的函数签命是React.cloneElement(element, [props], [...children]):原创 2021-11-27 00:15:00 · 907 阅读 · 0 评论 -
[react] react声明组件有哪几种方法,各有什么不同?
[react] react声明组件有哪几种方法,各有什么不同?1、无状态组件2、有状态组件3、高阶组件4、容器组件5、回调组件个人简介我是歌谣,欢迎和大家一起交流前后端知识。放弃很容易,但坚持一定很酷。欢迎大家一起讨论主目录与歌谣一起通关前端面试题...原创 2021-11-27 00:00:00 · 228 阅读 · 0 评论 -
[react] react组件间的通信有哪些?
[react] react组件间的通信有哪些?Props Context ref:通过Ref获取组建的实例,在通过实例拿到组件的属性值或者方法的回调 第三方的,Redux是基于Conext基础上的库,Mobx这是依赖收集,EventBus是发布订阅模式,与React本身关系不大个人简介我是歌谣,欢迎和大家一起交流前后端知识。放弃很容易,但坚持一定很酷。欢迎大家一起讨论主目录与歌谣一起通关前端面试题...原创 2021-11-26 05:00:00 · 131 阅读 · 0 评论 -
[react] react的状态提升是什么?使用场景有哪些
[react] react的状态提升是什么?使用场景有哪些React的状态提升就是用户对子组件操作,子组件不改变自己的状态,通过自己的props把这个操作改变的数据传递给父组件,改变父组件的状态,从而改变受父组件控制的所有子组件的状态,这也是React单项数据流的特性决定的。官方的原话是:共享 state(状态) 是通过将其移动到需要它的组件的最接近的共同祖先组件来实现的。 这被称为“状态提升(Lifting State Up)”。个人简介我是歌谣,欢迎和大家一起交流前后端知识。放弃..原创 2021-11-24 20:07:35 · 341 阅读 · 0 评论 -
[react] create-react-app创建新运用怎么解决卡的问题?
[react] create-react-app创建新运用怎么解决卡的问题?(这个问题应该描述的是使用cra脚手架创建项目慢的问题)这是因为cra默认使用的国外的npm源,替换为国内的npm源即,如淘宝源npm config set registry https://registry.npm.taobao.org个人简介我是歌谣,欢迎和大家一起交流前后端知识。放弃很容易,但坚持一定很酷。欢迎大家一起讨论主目录与歌谣一起通关前端面试题...原创 2021-11-25 00:45:00 · 287 阅读 · 0 评论 -
[react] react中怎样阻止组件渲染?
[react] react中怎样阻止组件渲染?class组件使用shouldComponentUpdate生命周期,return false 继承React.PureComponent只要prop没有改变(浅比较),就不会执行render函数函数式组件使用React.memo包裹组件函数,props没有改变就不会执行函数 使用React.memo包裹函数的同时传入比较函数作为第二个参数,return true,组件函数就不会执行通用在jsx的属性(包括事件)定义中,讲能提取的属性值提到外层原创 2021-11-26 00:30:00 · 2152 阅读 · 0 评论 -
[react] 类组件和函数式组件有什么区别?
[react] 类组件和函数式组件有什么区别?函数式组件没有state和一系列的钩子函数,只接收一个props个人简介我是歌谣,欢迎和大家一起交流前后端知识。放弃很容易,但坚持一定很酷。欢迎大家一起讨论主目录与歌谣一起通关前端面试题...原创 2021-11-25 02:15:00 · 198 阅读 · 0 评论 -
[react] react组件的state和props两者有什么区别?
[react] react组件的state和props两者有什么区别?State 是一种数据结构,用于组件挂载时所需数据的默认值。State 可能会随着时间的推移而发生突变,但多数时候是作为用户事件行为的结果。Props(properties 的简写)则是组件的配置。props 由父组件传递给子组件,并且就子组件而言,props 是不可变的(immutable)。组件不能改变自身的 props,但是可以把其子组件的 props 放在一起(统一管理)。Props 也不仅仅是数据–回调函数也可以通过 p原创 2021-11-25 05:30:00 · 278 阅读 · 0 评论 -
[react] react中遍历时为什么不用索引作为唯一的key值?
[react] react中遍历时为什么不用索引作为唯一的key值?key值的目的在Diff DOM的时候根据render前后的唯一key值快速的对树进行比较,保证key值得唯一性,如在进行中间插入或者最顶上插入时,算法会很明显得知道这是一个插入动作,然后让后续的node往后移位,如果是以索引index作为key值,那么在进入上述的操作后,插入后面的元素key值完全变了,算法不能准确的定位到树中node的位置,只能从插入的位置起,后续的全部重新生成,影响性能个人简介我是歌谣,欢迎和大家一起交流.原创 2021-11-24 23:45:00 · 316 阅读 · 0 评论 -
[react] 说说你对“在react中,一切都是组件”的理解
[react] 说说你对“在react中,一切都是组件”的理解React采用组件化的思想,最小的组件单位就是原生HTML元素,采用JSX的语法声明组件的调用 React的虚拟DOM,就是一个大的组件树,从父组件层到子组件,在render函数中层层堆叠 从react-router v4开始,路由本身也是组件 各个库提供的hoc返回的也是组件,如withRouter、connect React中的基础数据state props的传递也是以组件为基础个人简介我是歌谣,欢迎和大家一起交流前后端知.原创 2021-11-24 23:15:00 · 1039 阅读 · 0 评论 -
[react] react非父子组件如何通信?
[react] react非父子组件如何通信?reduxcontext个人简介我是歌谣,欢迎和大家一起交流前后端知识。放弃很容易,但坚持一定很酷。欢迎大家一起讨论主目录与歌谣一起通关前端面试题...原创 2021-11-24 23:30:00 · 136 阅读 · 0 评论 -
[react] 同时引用这三个库react.js、react-dom.js和babel.js它们都有什么作用?
[react] 同时引用这三个库react.js、react-dom.js和babel.js它们都有什么作用?React.js: React中的组件(Component)、Context、hooks等核心Api,还有虚拟DOM的比较、Fiber的算法实现等 React-dom.js 与web浏览器DOM相关的API,比如虚拟DOM的挂载,DOM的更新,Portal等 babel.js ES6+代码的转义个人简介我是歌谣,欢迎和大家一起交流前后端知识。放弃很容易,但坚持一定很酷。欢迎大家一起讨原创 2021-11-25 00:45:00 · 809 阅读 · 0 评论 -
[react] 在react中页面重新加载时怎样保留数据?
[react] 在react中页面重新加载时怎样保留数据?使用浏览器localstorage来保存应用程序的状态个人简介我是歌谣,欢迎和大家一起交流前后端知识。放弃很容易,但坚持一定很酷。欢迎大家一起讨论主目录与歌谣一起通关前端面试题...原创 2021-11-26 01:15:00 · 1727 阅读 · 0 评论 -
[react] 描述下在react中无状态组件和有状态组件的区别是什么?
[react] 描述下在react中无状态组件和有状态组件的区别是什么?1,无状态组件主要用来定义模板,接收来自父组件props传递过来的数据,使用{props.xxx}的表达式把props塞到模板里面。无状态组件应该保持模板的纯粹性,以便于组件复用。创建无状态组件如下:var Header = (props) = (<div>{props.xxx}</div>);export default Header2.有状态组件主要用来定义交互逻辑和业务数据(如果用了原创 2021-11-25 03:15:00 · 234 阅读 · 0 评论