个人总结
目录
2、说说你对useEffect的理解,可以模拟哪些生命周期?
3、说说 Real DOM 和 Virtual DOM 的区别?优缺点?
7、 super() 和super(props)有什么区别?
一、html
1.1、???
二、Vue
1.1、???
三、React
1、说说你对react的理解?有哪些特性?理解?
React,用于构建用户界面的 JavaScript 库,提供了 UI 层面的解决方案
遵循组件设计模式、声明式编程范式和函数式编程概念,以使前端应用程序更高效
使用虚拟DOM来有效地操作DOM,遵循从高阶组件到低阶组件的单向数据流
帮助我们将界面成了各个独立的小块,每一个块就是组件,这些组件之间可以组合、嵌套,构成整体页面
react 类组件使用一个名为 render() 的方法或者函数组件return,接收输入的数据并返回需要展示的内容特性
React特性有很多:
单向数据绑定 、JSX语法、虚拟DOM 、声明式编程、Component
2、说说你对useEffect的理解,可以模拟哪些生命周期?
useEffect是React Hooks中的一个常用钩子函数,用于在函数组件中执行副作用操作(如访问 API、操作 DOM 等)。
useEffect几乎可以模拟类组件中的所有生命周期方法,主要有以下几个参数:
第一个参数 effect: EffectCallback:必须是一个函数,表示需要执行的副作用操作,可以包含其他钩子和状态更新。
第二个参数 deps?: DependencyList:一个可选数组,在数组中指定的变量发生变化时才会执行 effect。如果此参数未传递,则每次组件更新时都会执行 effect。
使用不同的参数可以模拟不同的生命周期方法:
模拟 componentDidMount 生命周期方法:将 useEffect 的第二个参数设置为空数组或者不传递参数。
模拟 componentDidUpdate 生命周期方法:传递一个数组作为第二个参数,包含需要监听的状态变量,当这些状态变量更新时才会执行 effect。
模拟 componentWillUnmount 生命周期方法:在 effect 函数中返回一个 cleanup 函数,当组件销毁时会执行该函数。
3、说说 Real DOM 和 Virtual DOM 的区别?优缺点?
两者的区别如下:
虚拟 DOM 不会进行排版与重绘操作,而真实 DOM 会频繁重排与重绘
虚拟 DOM 的总损耗是“虚拟 DOM 增删改+真实 DOM 差异增删改+排版与重绘”,真实 DOM 的总损耗是“真实 DOM 完全增删改+排版与重绘”
真实 DOM 的优势: 易用
缺点:
效率低,解析速度慢,内存占用量过高
性能差:频繁操作真实 DOM,易于导致重绘与回流
使用虚拟 DOM 的优势如下:
简单方便:如果使用手动操作真实 DOM 来完成页面,繁琐又容易出错,在大规模应用下维护起来也很困难
性能方面:使用 Virtual DOM,能够有效避免真实 DOM 数频繁更新,减少多次引起重绘与回流,提高性能
跨平台:React 借助虚拟 DOM,带来了跨平台的能力,一套代码多端运行
缺点:
在一些性能要求极高的应用中虚拟 DOM 无法进行针对性的极致优化
首次渲染大量 DOM 时,由于多了一层虚拟 DOM 的计算,速度比正常稍慢
4、React中setState的执行机制
一个组件的显示形态可以由数据状态和外部参数所决定,而数据状态就是state, 当需要修改里面的值的状态需要通过调用setState来改变,从而达到更新组件内部数据的作用
setState第一个参数可以是一个对象,或者是一个函数,而第二个参数是一个回调函数,用于可以实时的获取到更新之后的数据
在使用setState更新数据的时候,setState的更新类型分成:同步更新,异步更新
在组件生命周期或React合成事件中,setState是异步
在setTimeout或者原生dom事件中,setState是同步
对同一个值进行多次 setState, setState 的批量更新策略会对其进行覆盖,取最后一次的执行结果
5、 React的事件机制总结
React事件机制总结如下:
- React 上注册的事件最终会绑定在document这个 DOM 上,而不是 React 组件对应的 DOM(减少内存开销就是因为所有的事件都绑定在 document 上,其他节点没有绑定事件)
- React 自身实现了一套事件冒泡机制,所以这也就是为什么我们 event.stopPropagation()无效的原因。
- React 通过队列的形式,从触发的组件向父组件回溯,然后调用他们 JSX 中定义的 callback
- React 有一套自己的合成事件 SyntheticEvent
6、 state和props有什么区别
相同点:
两者都是 JavaScript 对象
两者都是用于保存信息
props 和 state 都能触发渲染更新
区别:
props 是外部传递给组件的,而 state 是在组件内被组件自己管理的,一般在 constructor 中初始化
props 在组件内部是不可修改的,但 state 在组件内部可以进行修改
state 是多变的、可以修改
7、 super() 和super(props)有什么区别?
在 React 中,类组件基于 ES6,所以在 constructor 中必须使用 super
在调用 super 过程,无论是否传入 props,React 内部都会将 porps 赋值给组件实例 porps 属性中
如果只调用了 super(),那么 this.props 在 super() 和构造函数结束之间仍是 undefined
8、class组件和函数组件区别
- class组件是有状态的组件,可以定义state状态,函数组件无状态
- class组件有生命周期的,函数组件无生命周期
- class组件是由this对象,函数组件没有this对象
- 组件调用: class组件实例化后调用render方法调用,函数组件直接调用的。
- class组件内部的话,render方法return返回渲染jsx模板,函数组件直接返回即可
- ref获取子组件的对象,class组件可以直接获取到的,函数组件无法直接获取到。
- 绑定bind改变this指向,只适用于class组件
9、React中key的作用是什么?
key是虚拟DOM对象的唯一标识,在更新显示时key起到极其重要的作用 ,简单的来说就是为了提高diff的同级比较的效率,避免原地复用带来的副作用
react采用的是自顶而下的更新策略,每次小的改动都会生成一个全新的的vdom,从而进行diff,如果不写key,就会发生本来应该更新却没有更新
参考答案: 面试官:React中的key有什么作用? | web前端面试 - 面试官系列
10、受控组件和非受控组件
受控组件
由React控制的输入表单元素而改变其值的方式,称为受控组件。
比如,给表单元素input绑定一个onChange事件,当input状态发生变化时就会触发onChange事件,从而更新组件的state。
非受控组件
非受控组件指的是,表单数据由DOM本身处理。即不受setState()的控制,与传统的HTML表单输入相似,input输入值即显示最新值。
在非受控组件中,可以使用一个ref来从DOM获得表单值。
11、React中组件是如何通信的
-
父组件向子组件通讯: 父组件可以向子组件传入
props
的方式,向子组件进行通讯。 -
子组件向父组件通讯:
props
+回调的方式,父组件向子组件传递props
进行通讯,此props
为作用域为父组件自身的函数,子组件调用该函数,将子组件想要传递的信息,作为参数,传递到⽗组件的作⽤域中。 -
兄弟组件通信: 兄弟组件之间的传递,则父组件作为中间层来实现数据的互通,通过使用父组件传递 例:组件A – 传值 --> 父组件 – 传值 --> 组件B
-
跨层级通讯:
Context
设计⽬的是为了共享那些对于⼀个 组件树⽽⾔是“全局”的数据, 使用context
提供了组件之间通讯的一种方式,可以共享数据,其他数据都能读取对应的数据 例如当前认证的⽤户、主题或⾸选语⾔,对于跨越多层的全局数据通过Context
通信再适合不过。 -
发布订阅者模式: 发布者发布事件,订阅者监听事件并做出反应,我们可以通过引⼊
event
模块进⾏通信。 -
全局状态管理工具: 借助
Redux
或者Mobx
等全局状态管理⼯具进⾏通信,这种⼯具会维护⼀个全局状态中⼼Store
,并根据不同的事件产⽣新的状态。
12、为什么react元素有一个$$type属性?
目的是为了防止 XSS 攻击
。因为 Synbol
无法被序列化,所以 React
可以通过有没有 $$typeof
属性来断出当前的 element
对象是从数据库来的还是自己生成的。如果没有 $$typeof
这个属性,react
会拒绝处理该元素。
13、React旧生命周期有哪些问题?
(1) componentWillMount ,在ssr中 这个方法将会被多次调用, 所以会重复触发多遍,同时在这里如果绑定事件,
将无法解绑,导致内存泄漏 , 变得不够安全高效逐步废弃。
(2) componentWillReceiveProps 外部组件多次频繁更新传入多次不同的 props,会导致不必要的异步请求
(3) componetWillupdate, 更新前记录 DOM 状态, 可能会做一些处理,与componentDidUpdate相隔时间如果过长, 会导致 状态不太信