前端框架常见问题

Angular

Angular变更检测

1. 变更检测机制

• Zone.js：Angular 使用 Zone.js 来监控异步操作（如事件、HTTP 请求等）。Zone.js 会自动触发变更检测，确保在这些操作完成后视图得到更新。

• 变更检测周期：每当发生异步事件（如用户输入、HTTP 响应）时，Angular 会在特定的周期中检查数据是否发生变化。如果数据发生变化，则更新视图。

Angular 的变更检测机制会在以下几种情况触发：

• 用户交互：如点击、输入等。
• 异步操作：如 HTTP 请求、定时器等。
• Angular 事件：如 Angular 的生命周期钩子。
• 应用状态变化：如服务中的数据更新

2. 变更检测策略

Angular 提供了两种主要的变更检测策略：

1. Default（默认策略）：

   • 工作方式：Angular 会在每个异步事件（如点击、输入）之后检查整个组件树的变化。这种策略确保组件总是与最新的数据同步，但可能会导致性能开销，尤其是在大型应用中。
   • 使用方式：默认情况下，所有组件都使用这种策略。

2. OnPush：

   • 工作方式：Angular 仅在以下情况下检查组件的变化：
     • 组件的输入属性（@Input）发生变化。
     • 组件中的事件（如用户操作）发生。
     • 组件的可观察对象（Observable）发出新值。

3. 手动控制变更检测

• ChangeDetectorRef：
  • 允许开发者手动触发变更检测。
  • 方法包括 detectChanges() 和 markForCheck()。
• ApplicationRef： 允许开发者手动触发整个应用的变更检测。

4. 性能优化技巧

• 使用 OnPush 策略：减少变更检测的范围，特别是在大型组件树中。
• 使用 trackBy：在 *ngFor 中使用 trackBy 来优化列表渲染性能。
• 避免复杂的模板表达式：将复杂的逻辑移到组件类中，以减少模板中的计算开销。

Vue

Vue生命周期

• 创建阶段：

  • beforeCreate：实例刚被创建，数据观测和事件/方法尚未初始化。
  • created：实例创建完成，数据观测和事件/方法已初始化，但 DOM 尚未挂载。

• 挂载阶段：

  • beforeMount：挂载开始，相关的 render 函数首次被调用。
  • mounted：挂载完成，el 被新创建的 vm.$el 替换，并挂载到实例上。

• 更新阶段：

  • beforeUpdate：数据更新时调用，虚拟 DOM 重新渲染之前。
  • updated：虚拟 DOM 更新完成后调用，DOM 更新完成。

• 销毁阶段：

  • beforeDestroy：实例销毁之前调用，实例仍然可用。
  • destroyed：实例销毁后调用，所有的事件监听器和子实例都被移除。

双向绑定是如何实现的

Vue 使用了 响应式数据系统 来实现数据的双向绑定。其核心思想是使用 Object.defineProperty（Vue 2.x）或 Proxy（Vue 3.x）来劫持对象的属性，以便在数据发生变化时通知视图更新，从而实现双向数据绑定。

React

React常用hook

1. useState 用于在函数组件中添加状态。
2. useEffect 用于处理副作用，比如数据获取、订阅或手动操作 DOM。
3. useContext 用于访问上下文中的值，替代传统的 Context API 的 Context.Consumer
4. useReducer 用于在函数组件中管理复杂的状态逻辑，比 useState 更适合处理复杂的状态逻辑。
5. useMemo 用于优化性能，缓存计算结果以避免不必要的重新计算。
6. useCallback 用于优化性能，缓存回调函数以避免在每次渲染时重新创建函数。
7. useRef 用于创建对 DOM 元素或任意值的引用。
8. useImperativeHandle 用于自定义暴露给父组件的实例值。

什么是单向数据流

在 React 中，单向数据流（unidirectional data flow）是指数据在应用中的流动方式是单向的，即数据只能从上游流向下游，而不能反向流动。这个概念是 React 的核心设计理念之一，有助于使应用的状态管理和数据流动更为清晰和可预测。

作用：保证数据的可控性。

hooks和以前的方式有什么区别

Hooks 提供了一种更简单、灵活和可复用的方式来管理组件的状态和副作用。

React Hooks 通过允许在函数组件中使用状态和其他 React 特性，显著简化了组件的开发和管理。相比于之前的类组件，Hooks 提供了一种更清晰、更灵活的方式来管理状态和副作用，同时也改进了代码的复用性和可读性。

类组件需要自己声明状态，并编写操作状态的方法，并且还需要维护状态的生命周期

react的生命周期

• Mounting(挂载)：已插入真实 DOM
• Updating(更新)：正在被重新渲染
• Unmounting(卸载)：已移出真实 DOM

react的特点

• JSX
• 组件
• 单向数据流
• 虚拟DOM

react的diif算法

React 的 diff 算法是优化虚拟 DOM 更新的关键技术，它用于高效地计算和应用 DOM 的变化。以下是 diff 算法的核心概念和工作原理：

• 虚拟 DOM：React 使用虚拟 DOM（Virtual DOM）来表示实际 DOM 的内存映射。每次组件状态更新时，React 会生成一个新的虚拟 DOM 树，并与旧的虚拟 DOM 树进行比较，以确定需要更新的部分。

• 最小化操作：diff 算法的目标是最小化实际 DOM 操作，减少重新渲染的开销。通过高效地比较虚拟 DOM 的新旧状态，算法只更新发生变化的部分，从而提升性能。

react中diff算法主要遵循三个层级的策略：

• tree层级 DOM节点跨层级的操作不做优化，只会对相同层级的节点进行比较，只有删除、创建操作，没有移动操作
• conponent 层级 拥有相同类的两个组件会生成相似的树形结构，而拥有不同类的两个组件则会生成不同的树形结构。
• element 层级 对于比较同一层级的节点们，通过给每个子节点分配唯一的id，React能够快速识别出哪些子节点发生了变化，哪些没有变化。然后，React只对发生变化的子节点进行DOM操作，避免了不必要的操作，提高了性能表现。