React面试
王 歪歪
不要等你准备好再去尝试,因为永远都准备的不够好
展开
-
React面试题:React.Component和React.PureComponent的区别?
pure:纯净的,即为纯组件,可以用来优化React程序,减少render函数执行的次数,提高组件的性能。原创 2024-02-20 13:34:36 · 517 阅读 · 2 评论 -
在react中说说对受控组件和非受控组件的理解?以及应用场景
这时候当我们在输入框输入内容时,会发现输入的内容无法显示出来,此时input标签是一个可读的状态,因为value被this.state.username所控制,当用户输入时,this.state.username不会自动更新,这样的话input的内容就不会发生变化了,想要解除被控制,可以为input标签设置onChange事件,触发的时候更新state,从而导致input框内容更新。简单来讲,就是受我们控制的组件,组件的状态全程响应外部数据。原创 2024-01-21 22:23:47 · 651 阅读 · 0 评论 -
说说对React中类组件和函数组件的理解?有什么区别?
这里的useEffect就相当于类组件中的componentDidMount生命周期,如果在useEffect中return一个函数,这个函数会在组件卸载的时候执行,相当于componentWillUnmount。在使用hooks的情况下,一般如果函数组件调用state,需要创建一个state,提升到你的父组件,然后通过props传递给子组件。在hooks出来之前,函数组件是无状态组件,不能保管组件的状态,类组件使用setState来保管。5.获取渲染的值的不同。原创 2024-01-21 18:29:45 · 609 阅读 · 0 评论 -
React类组件中super()和super(props)有什么区别?
class sup{//tom//20通过super关键字实现调用父类,super代替父类的构建函数,相当于调用sup.prototype.constructor.call(this,name),如果子类不适用super关键字会报错,报错的原因是子类没有自己的this对象,他只是继承父类的this对象,然后对其加工,也不能先用this,再调用super。原创 2024-01-20 22:09:11 · 736 阅读 · 8 评论 -
前端react面试题:state和props有什么区别?
一个组件的状态可以由数据和外部参数所决定,而数据状态是state,一般在construct中初始化,通过setState()方法修改值的状态,从而达到更新组件内部数据的作用,并且重新调用组件的render方法super();count:0,});render(){return (setState还可以接受第二个参数,一个函数,在setState调用完成并且组件开始重新渲染时被调用,可用来监视是否完成渲染},原创 2024-01-19 10:16:27 · 503 阅读 · 0 评论 -
面试题:对React-Fiber的理解,它解决了什么问题?
React应用的渲染是同步进行的,即只要一开始渲染就一直执行,直到完成。这种方式在处理大型、复杂的组件时可能会导致主线程被阻塞,导致用户界面卡顿、无响应。:react fiber解决了react渲染过程的同步阻塞问题,通过增量渲染和优先级控制来实现更好的用户体验,提升了react应用的响应能力和性能。:它将渲染过程分解成多个小任务,并且允许中断和恢复渲染过程,使得渲染过程可以在多个帧中分布执行。将控制权还给主线程,使得如用户交互等能得到响应。原创 2023-12-14 09:07:05 · 551 阅读 · 1 评论 -
React面试题:React高阶组件、Render props、hooks有什么区别?为什么要不断迭代?
hoc和render props都有特定的使用场景和明显的缺点,hoc:prop覆盖问题,render props:嵌套地狱问题,hook是react16.8的新API,解决了hoc和render props的一些缺点,让组件的逻辑复用更简洁了。为了提供更好的开发体验和更高的代码复用性,可以根据具体需求选择合适的模式和技术,通过不断迭代和改进,提供更灵活、更强大的工具和模式,以满足开发者的需求。在具有render prop的组件接受一个返回React元素的函数,在组件内部写渲染逻辑。原创 2023-12-13 11:40:25 · 474 阅读 · 1 评论 -
React面试题:React中的Hooks
优点:hook解决了hoc的prop覆盖问题,同时解决了render props的嵌套地狱问题,使用直观,能在return之外使用数据。它可以在不编写class的情况下使用state以及其他的React特性,通过自定义hook,可以复用代码逻辑。注意:只能在组件顶层使用,不能在分支语句中使用。原创 2023-12-13 11:30:14 · 472 阅读 · 1 评论 -
React面试题:什么是Render props
React面试题:什么是Render propsDataProvider中的props中有一个render函数,这里调用这个函数,返回一个Hello Tom的标签。Render props是React组件之间使用一个值为函数的prop共享代码的简单技术。在具有render prop的组件接受一个返回React元素的函数,在组件内部写渲染逻辑。原创 2023-12-13 10:49:46 · 420 阅读 · 1 评论 -
React面试题:React高阶组件
高阶组件(HOC:Higher-Order Components)是React中用于复用组件逻辑的一种,和高阶函数(参数为函数,返回值也是函数)很相似,以组件作为函数,返回一个新的组件,它本身不属于React API,它是一种基于React组合特性的设计模式。然后直接使用这个组件即可。回答思路:复用组件逻辑。原创 2023-12-11 22:28:01 · 405 阅读 · 1 评论 -
React面试题:React组件中怎么做事件代理以及它的原理是什么?
React把所有的事件绑定到结构的最外层使用统一的事件监听器,这个事件监听器上维持了一个组件内部事件监听和处理函数的映射关系。通过将事件处理程序绑定到父组件上,然后利用事件冒泡机制,子组件触发事件时冒泡到父组件,所有的事件都自动绑定在最外层。React会自动将每个方法的this指向该组件的实例。原创 2023-12-10 22:04:21 · 458 阅读 · 1 评论 -
React面试题: React的事件和普通的HTML事件有什么不同?
面试题: React的事件和普通的HTML事件有什么不同?react不能用return false来阻止,而必须调用event.preventDefault()来阻止。:原先先,合成事件后,需避免原生事件与合成事件混用,若原生事件阻止冒泡会导致合成事件无法执行。(2)将事件同意存放在一个事件池(数组),减少了内存消耗,避免频繁的增删。(3)便于react统一管理,提高了事件机制的执行效率。:原生事件全为小写,react事件为小驼峰。:(1)兼容所有浏览器,更好的跨平台。:原生为字符串,react为函数。原创 2023-12-08 14:59:02 · 401 阅读 · 0 评论 -
React面试题:React事件机制
React面试题:React事件机制,React事件机制目的、原理原创 2023-12-08 11:25:33 · 399 阅读 · 0 评论 -
React面试题:React.Component和React.PureComponent的区别?
如果在页面中使用了引用类型的数据,当执行该函数更新时只会比较是不是同一地址,而不会比较这个地址中的数据是否一致,浅比较会忽略属性或状态的突变,如果只改变引用数据类型的值,则不会执行render函数,如果需要重新渲染则需另外开辟空间引用数据,所以pureComponent一般会用在一些纯展示组件上。自动执行shouldComponentUpdate,执行该函数是进行。pure:纯净的,即为纯组件,可以用来优化React程序,减少render函数执行的次数。原创 2023-12-18 14:38:16 · 556 阅读 · 0 评论 -
React面试题:Component,Element,Instance之间有什么区别和联系?
一个元素element是一个普通对象,描述了对于一个DOM节点或者其他组件Component,元素可在它的props中包含别的元素,创建一个元素的成本很低,但是创建之后是不可变的。:一个组件可以通过多种方式声明,可以是带一个render()方法的类,也可以是一个函数,这两种情况下,它都把属性props作为输入,返回一棵元素树。组件、元素和实例是描述系统的不同层次和抽象级别的概念,它们之间相互关联,共同构成了系统的组成和运行。原创 2023-12-18 15:16:35 · 748 阅读 · 0 评论 -
React面试题:React.createClass和extend Component的区别有哪些?
5.Mixins的区别:React.createClass在在创建组件时可以添加一个mixins的属性,并将可混合的类的集合以数组的形式赋给mixins,而React.Component不直接支持mixins需要安装库(npm install react-mixin)3.状态的区别:createClass:通过getInitialState()方法返回一个包含初始值的对象,而React.Component直接通过constructor设置初始状态。是一种函数式编程的概念,用于创建和返回其他函数。原创 2023-12-19 11:44:04 · 514 阅读 · 0 评论 -
React面试题:对componentWillReceiveProps的理解
当props发生改变时执行,初始化render时不执行,在这个函数中可以更具属性的变化来调用this.setState()来更新组件的状态,旧属性还是可以通过this.props来获取,这里更新状态不会触发额外的render调用。在render执行前就能获取到props,可是将数据请求放在这里,不必将所有请求全放在父组件中,只有在该组件渲染时才会触发写在componentWillReceiveProps()中的请求。是一个生命周期函数,在react17版本中开始弃用,当props发生改变时执行。原创 2023-12-19 22:27:49 · 544 阅读 · 2 评论 -
React面试题:哪些方法会触发React重新渲染?重新渲染render会做什么?
执行setState()来改变状态时会触发render,但是不是执行setState()一定会触发render,当setState()传入null时,并不会触发render。2.对新旧DOM树进行深度优先遍历,每遍历旧DOM树到一个节点的时候都会和新DOM树进行比较,把有差异的节点放到一个对象里面。只要父组件重新渲染了,不管传入的props有没有发生变化,子组件都会重新渲染,从而触发render。3.遍历差异对象,根据差异的类型,根据对应规则更行VNode。1.对比新旧虚拟节点(VNode)、虚拟DOM。原创 2023-12-20 11:12:26 · 584 阅读 · 0 评论 -
React面试题:React如何判断什么时候重新渲染组件?
当props改变时,或者直接通过setState方法改变state时,组件就会获取新状态(1)state值发生改变时(2)父组件重新渲染时什么时候重新渲染组件详细请看此篇文章:(https://blog.csdn.net/laowang357/article/details/135102492?spm=1001.2014.3001.5502)(1)本质上shouldComponentUpdate是用来性能优化的,它允许我们手动控制组件的重新渲染,避免不必要的渲染,从而提升性能。(在react17被弃用)原创 2023-12-21 11:15:03 · 545 阅读 · 0 评论 -
2024最新前端React面试题:React18相比react17有哪些主要更新?
在react17中只有react事件会进行批处理,原生js事件、promise、setTimeout、setInterval不会自动批处理,在react18中所有事件都进行批处理,多次setState会被合并为一次执行,提高了性能多个状态更新操作合并为一个更新操作的机制。这种机制可以提高性能,减少不必要的重渲染,并优化渲染过程。原创 2023-12-26 20:22:30 · 1302 阅读 · 0 评论 -
2024前端React最新面试题:React设计思想是什么?
由浏览器的渲染可知DOM操作是一个很耗性能的一个操作,因此产生了虚拟DOM,虚拟DOM是对真实DOM的映射,React通过新旧DOM的对比,得出需要更新数据的部分,实现数据的增量更新。,封闭是针对渲染工作来说的,指的是组件内部的状态都由自身维护,只处理自身内部的渲染逻辑。开放是针对通信来说的,指不同组件之间可以通过props等进行数据交互。UI = function(data),通过这个公式得出,如果要渲染界面,不应该直接操作DOM,而是通过修改state或props来驱动视图更新。原创 2023-12-29 14:36:02 · 1781 阅读 · 4 评论 -
2024最新前端React面试题:JSX是什么,它和JS有什么区别
回答思路:1.编写方式—>2.分别是什么?—>3.分别是怎么编译的?原创 2024-01-01 23:46:47 · 752 阅读 · 0 评论 -
最新React面试题:说说对React的理解?有哪些特性?
React是用于构建用户界面的JS库,只提供UI层面的解决方案,遵循组件设计模式、声明式编程和函数式编程,使用虚拟DOM来操作真实DOM,遵循从高阶组件到低阶组件的单向数据流,帮助我们将界面划分成各个独立的小块,每一个块就是组件,组件之间可以组合、嵌套,构成总体页面。在React中一切皆为组件,通常将应用程序的整个逻辑分解为小的单个部分,每个独立的部分就是组件,组件可以是一个函数一个类,它接收数据输入,处理并返回在UI中呈现的React元素。3.可维护:每个小组件只有自己的逻辑,方便维护。原创 2024-01-17 09:58:06 · 668 阅读 · 0 评论