react面试题

2024-03-30 09:13•杂谈•阅读 4548

https://blog.csdn.net/kellywong/article/details/106430977

一，react hooks组件传值

1，父传子：通过props传值

2，子传父：子组件通过父组件传递的事件newList，把值传给父组件

3，通过ref元素的引用来传值

4，跨级传递：使用useContext来传值

hooks的优缺点

解决类组件的代码复杂，复杂的this指向，bing绑定；复杂的生命周期，代码冗余

react hooks钩子：

1，useState()，状态钩子，定义变量用

2，useEffect()，副作用钩子，用来清除副作用，数据请求，代替生命周期，修改dom，销毁定时器

[]依赖什么值来触发，空就是依赖自己

3，useContext(Value); 解决父子组件传值的问题

4，useReducer() 状态共享相当于redux

5，useMemo() 解决组件重复执行问题, ：父组件a值改变的时候，子组件b才会更新

6，useRef() 获取DOM，保存变量

hooks的生命周期

它能让组件在不使用 class 的情况下拥有 state，所以就有了生命周期的概念，所谓的生命周期其实就是 useState、 useEffect() 和 useLayoutEffect()

1，vue mixin怎么写的，有什么用，vue mixin react相似的功能是哪个

vue的mixin(混合)就是混合代码，合并代码

分为全局合并，基础options合并

https://blog.csdn.net/qq_27460969/article/details/88688073

react可以通过高阶组件（Higher Order Components--HOC）来扩展，而vue需要通过mixins来扩展

1，vue之mixin混入偷懒技术

mixin：实现vue组件中的可复用功能

https://www.cnblogs.com/shannen/p/13968418.html

2，vue的slot插糟有什么作用，react那个有相似功能

在vue中，引入的子组件标签中间是不允许写内容的。为了解决这个问题，官方引入了插槽(slot)的概念。

作用是为了方便给子组件传入html，假如一个场景，有5个页面，这5个页面只有一个区域的内容不一样，你会怎么去写这个5个页面，复制粘贴是一种，在vue中插槽(slot)是更好的做法。

2.1，react组合，实现vue插槽功能

通过一个方法传入不同的参数，调用这个方法，然后把子组件当参数传进去，传入不同的子组件就显示不同html

https://blog.csdn.net/qq_42813491/article/details/95945025

3，js面相对象的继承有哪些方法

https://www.cnblogs.com/gaosirs/p/10637609.html

4，面向对象怎么实现重写，重载

5，js怎么实现父方法一个参数调用一个方法，2个参数调用另外一个方法

6，自己实现过hooks吗

自定义 Hook 是一个函数，其名称以 “use” 开头，函数内部可以调用其他的 Hook。封装一些逻辑的函数，可以复用减少代码冗余

6.1,用于处理字符串(url)

6.2,数据格式化(日期)

6.3,业务逻辑性

https://www.cnblogs.com/xm0328/p/14421516.html

7，数据类型：

JS数据类型：JS的基本类型和引用类型

基本类型（单类型）：除Object。 String、Number、boolean、null、undefined。

引用类型：object。里面包含的 function、Array、Date。

https://blog.csdn.net/u013592575/article/details/95087953

null 和 undefined 有什么区别

undefined 是没有定义的，没有初始化，，null 是定义了但是为空，是不存在的对象。

判断数据类型：

typeof 不适合数组和对象，和 null

instanceof 在判断数组和Data很好用

Object.prototype.toString 可以判断基本类型和数组

二，

1，什么叫事件冒泡，事件捕获

2，vue合成事件和原生事件有什么区别

vue diff和react diff有什么不同

vue mixin优劣和替代方案

vue2.0和3.0的区别，3.0的优势

vue自定义指令及原理

vue-devtools应用

什么是依赖注入

react新版生命周期及hooks实现方式

介绍下redux

BFC是什么，有什么用，如何实现

如何实现12px以下字体

如何优化scale模糊

css原子化实现及优劣

2，vue合成事件和原生事件有什么区别

合成事件机制：React并不是将click事件直接绑定在dom上面，而是采用事件冒泡的形式冒泡到document上面

在document处监听所有支持的事件,将事件内容封装交给中间层（负责所有事件合成）

https://www.yuque.com/dahai-gyz0e/tqybqc/asitqp

https://www.yuque.com/dahai-gyz0e/tqybqc/mgb7h6

3，vue diff算法

用 Js 对象结构表示 DOM 树的结构；然后用这个树构建一个真正的 DOM 树，插到文档当中

当状态变更的时候，重新构造一棵新的对象树。然后用新的树和旧的树进行比较(diff)，记录两棵树差异

把差异的部分构建的真正的DOM树上(patch)，视图就更新了

diff算法是通过对同层的树节点进行比较，这样复杂度就很低

4，vue mixin优劣和替代方案

混入 (mixin) 提供了一种非常灵活的方式，来混入其它js和组件，减少代码冗余,提高可复用性

其它方案：比如说高阶组件就允许你组合相似函数，Mixin只是的一种实现方式。

5，vue2.0和3.0的区别，3.0的优势

重构了响应系统：使用代理替换object.defineProperty

可以直接监听数组类型的数据变化,

重构了虚拟dom，代码结构调整体积更小

6，虚拟dom

用js对象为基础来模拟原生dom结构，包含真实的dom信息.

因为操作原生dom慢，js运行效率高，将DOM对比操作放在JS层，提高效率。

虚拟dom本质上就是在 JS 和 DOM 之间做了一个缓存。提升渲染性能

7，vue自定义指令及原理

vue.directive 定义一个指令钩子函数：bind，inserted定义指令的功能

8，什么是依赖注入

它的目的是将组件与它们当前的组织方式耦合起来，通过他可以向子孙组件传递数据，相当于加强版的props

https://www.jianshu.com/p/6651dccd282c

9，react新版生命周期及hooks实现方式

10，介绍下redux

9.1，js判断对象类型

typeof 判断对象和数组都返回object,因此它无法区分对象和数组

toString.call()判断最全

https://www.cnblogs.com/sunmarvell/p/9386075.html

9.2，判断对象是否为空

var arr = Object.keys(data);
alert(arr.length == 0); //true 为空， false 不为空

var b = (JSON.stringify(data) == "{}");
alert(b);   //true 为空， false 不为空

ES6的高阶函数

//新的写法: filter / map / reduce
    // filter中的回调函数有一个要求：必须返回一个bollean值
        // true : 当返回true时，函数内部会自动将这次回调的n加入到新的数组中
        // false: 当返回fasle时，函数内部会过滤掉这次的n。
        let new_nums = nums.filter(function (n) {
            return n < 100
        })

    // map 映射函数
        let new_nums1 = new_nums.map(function (n) {
            return n * 3
        })

    // reduce(func(上一次结果 初始值为默认值，数组的n),默认值=0) 对数组中所有的内容进行汇总。
        let new_nums2 = new_nums1.reduce(function (prev,n){
            return prev + n
        },0)

//或者可以写成
    let new_writeNums = nums.filter(function (n){return n < 100}).map(function(n){return n * 3}).reduce(function(prev,n){return prev + n},0)

11，BFC是什么，有什么用，如何实现

BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，

作用：清除浮动，实现自适应布局

12，如何实现12px以下字体

使用transform: scale(.95) 使用图片

13，如何优化scale模糊

给缩放代码加上transform:translate3d(0,0,0)

14，css原子化实现及优劣

就是定义很多css变量，去元素的class去拼凑

可以直接修改 HTML 属性而不用修改 CSS，改变最终渲染的效果

面试方法和个人成长

https://lengyuexin.blog.csdn.net/article/details/112707033