我所整理的面试题

Posted 2022-10-16 我是真的不会前端

合成事件的优点

与原生事件执行时机不同：原生事件先执行、合成事件后执行。在react底层、主要对合成事件做了两层封装：

• 事件委派和兼容性问题
• 支持跨段响应
• 内存消耗低、将事件统一放在一个数组、避免频繁的新增与删除（做了一层垃圾回收机制的封装）
• 方便react统一管理事务机制

div=>document=>syntheticEvent=>event=>handle
dom=>事件冒泡到顶层=>实例化统一的react event => event对象交由对应的处理器执行

hooks介绍一下

实现原理

底层依赖顺序链表，每次进行render时都需要按顺序查找更新
初始化阶段
● mountState（首次渲染）构建链表并渲染；updateState 依次遍历链表并渲染。

更新阶段
● updateState 之后，按顺序去遍历之前构建好的链表，取出对应的数据信息进行渲染。

类组件和Hooks区别

● 类组件的根基是 OOP（面向对象编程），所以它有继承、有属性、有内部状态的管理。
● 函数组件的根基是 FP，也就是函数式编程。它属于“结构化编程”的一种，与数学函数思想类似。也就是假定输入与输出存在某种特定的映射关系，那么输入一定的情况下，输出必然是确定的。
● 类组件是可以实现继承的，而函数组件缺少继承的能力。继承比较黑盒，不建议采用。组合优于继承
● 类组件this模糊性

聊聊diff

● 对新旧两棵树进行一个深度优先遍历，真实的 DOM 首先会映射为虚拟 DOM；
● 当虚拟 DOM 发生变化后，就会根据差距计算生成 patch，这个 patch 是一个结构化的数据，内容包含了增加、更新、移除等；
● 根据 patch 去更新真实的 DOM，反馈到用户的界面上。

能细说一下this.setstate嘛

batchingStrategy 对象可以理解为“锁管理器”。这里的“锁”，是指 React 全局唯一的 isBatchingUpdates 变量，isBatchingUpdates 的初始值是 false，意味着“当前并未进行任何批量更新操作”。每当 React 调用 batchedUpdate 去执行更新动作时，会先把这个锁给“锁上”（置为 true），表明“现在正处于批量更新过程中”。当锁被“锁上”的时候，任何需要更新的组件都只能暂时进入 dirtyComponents 里排队等候下一次的批量更新，而不能随意“插队”。此处体现的“任务锁”的思想，是 React 面对大量状态仍然能够实现有序分批处理的基石。

说下jsBridge的原理

JSBridge是什么？JSBridge是一种桥接器，通过JS引擎或Webview容器为媒介 ，约定协议进行通信，实现Native端和Web端双向通信的一种机制。

• 将Native端的接口封装成js接口
• 将Web端js接口封装成原生接口
  WebView是Native中加载网页的一个控件，该组件提供一个evaluatejavascript()方法运行JS代码。我们要做的是在Native端执行一个js方法，在Web端进行监听。
  当Web端要请求Native端的方法时，我们首先要自定义一个URL Schema，向Native端发起一个请求，最后在Native端的WebView进行监听，下面我们看看具体实现