常见面试题（1）

晚时之秋

已于 2023-01-31 16:24:39 修改

阅读量90

点赞数 1

分类专栏：常见面试题总结文章标签：前端 javascript ui

于 2023-01-31 15:10:01 首次发布

本文链接：https://blog.csdn.net/weixin_66557048/article/details/128817552

版权

常见面试题总结专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1.说说你对react的理解？有哪些特性？详解

理解：
react是用于构建用户界面的JavaScript库，只提供UI层次的解决方案，
遵循组件式设计模式，声明式编程范式和函数式编程概念，已使前端应用程序更高效，使用虚拟DOM来有效的操作DOM，遵循从高阶组件到低级组件的单向数据流
特性：
（1）JSX语法
（2）单向数据绑定
（3）虚拟DOM
（4）声明式编程
（5）Component

2.说说Real DOM和Virtual DOM的区别？优缺点？详解

区别：

虚拟DOM不会进行排版和重绘操作，而真实DOM会频繁进行重排和重绘
虚拟DOM的总消耗是：虚拟DOM增删改+真实DOM差异增删改+排版和重绘；真实DOM的总消耗：真实DOM完全增删改+排版和重绘

优缺点：

虚拟DOM：
优点：
（1）灵活简单，使用方便
（2）减少重排和重绘，提高性能
（3）跨平台，一套代码多端使用
缺点：
（1）在一些性能要求极高的应用中虚拟DOM无法进行针对性的极致优化
（2）首次渲染大量DOM时，由于多了一层虚拟DOM的计算，速度比正常稍慢
真实DOM：
优点：
（1）易用
缺点：
（1）效率低，解析速度慢，内存占用量较高
（2）频繁操作真实DOM，会造成重绘和回流

3.说说React生命周期有哪些不同的阶段？每个阶段对应的方法是？详解

（1）挂载阶段

constructor()
getDerivedStateFromProps()
render()
componentDidMount()

（2）更新阶段

getDerivedStateFromProps()
shouldComponentUpdate()
render()
getSnapshotBeforeUpdate()
componentDidUpdate()

（3）销毁阶段

componentWillUnmount()

4.说说React中setState执行机制？详解

理解：
一个组件中的显示形态可以由数据状态和外部参数所决定，而数据状态就是state，当需要修改里面的值的状态需要通过调用setState来改变，从而达到更新组件内部数据达到作用
总结：
（1）在组件生命周期或React合成事件中，setState是异步
（2）在setTimeout或者原生DOM事件中，setState是同步

5.说说react的事件机制？详解

理解：
React基于浏览器的事件机制自身实现了一套事件机制，包括事件注册、事件的合成、事件冒泡、事件派发等在React中这套事件机制被称之为合成事件
合成事件是 React模拟原生 DOM事件所有能力的一个事件对象，即浏览器原生事件的跨浏览器包装器
总结：
（1）React 上注册的事件最终会绑定在document这个 DOM 上，而不是 React 组件对应的DOM
（2）React 自身实现了一套事件冒泡机制，所以这也就是为什么我们
event.stopPropagation()无效的原因。
（3）React 通过队列的形式，从触发的组件向父组件回溯，然后调用他们 JSX 中定义的 callback
（4）React 有一套自己的合成事件 SyntheticEvent

6.React组件之间如何通信？详解

（1）父组件向子组件传递：父组件在调用子组件的时候，只需要在子组件标签内部传递参数，子组件通过props属性就能接收父组件传递过来的参数
（2）子组件向父组件传递：父组件向子组件传一个函数，然后通过这个函数的回调，拿到子组件传过来的值
（3）兄弟组件之间的通信：兄弟组件之间的传递，则父组件作为中间层来实现数据的互通，通过使用父组件传递
（4）父组件向后代组件传递：使用context提供了组件之间通讯的一种方式，可以共享数据，其他数据都能读取对应的数据
（5）非关系组件传递：redux，react-redux

7.说说你对受控组件和非受控组件的理解？应用场景？详解

理解：
（1）受控组件：简单来讲，就是受我们控制的组件，组件的状态全程响应外部数据
（2）非受控组件：不受我们控制的组件，一般情况是在初始化的时候接受外部数据，然后自己在内部存储其自身状态
应用场景：
（1）受控组件：一次性取值，提交时验证，动态输入，一个数据的多个输入，强制输入格式
（2）非受控组件：一次性取值，提交时验证

8.说说你对fiber架构的理解？解决了什么问题？详解

理解：
（1）从架构角度来看，Fiber 是对 React核心算法（即调和过程）的重写
（2）从编码角度来看，Fiber是 React内部所定义的一种数据结构，它是 Fiber 树结构的节点单位，也就是 React 16 新架构下的虚拟DOM
解决：
（1）为每个增加了优先级，优先级高的任务可以中断低优先级的任务。然后再重新，注意是重新执行优先级低的任务
（2）增加了异步任务，调用requestIdleCallback api，浏览器空闲的时候执行
（3）dom diff树变成了链表，一个dom对应两个fiber（一个链表），对应两个队列，这都是为找到被中断的任务，重新执行

9.说说react diff的原理是什么？详解

react中diff算法主要遵循三个层级的策略：
（1）tree层级：DOM节点跨层级的操作不做优化，只会对相同层级的节点进行比较，只有删除、创建操作，没有移动操作
（2）conponent 层级：如果是同一个类的组件，则会继续往下diff运算，如果不是一个类的组件，那么直接删除这个组件下的所有子节点，创建新的
（3）element 层级：对于比较同一层级的节点们，每个节点在对应的层级用唯一的key作为标识，通过key可以准确地发现新旧集合中的节点都是相同的节点，因此无需进行节点删除和创建，只需要将旧集合中节点的位置进行移动，更新为新集合中节点的位置