面试题：Angular和React在性能优化策略上的不同

Angular：
- 采用双向数据绑定，基于Zone.js实现的变更检测机制。它会在异步任务（如DOM事件、XHR、setTimeout等）触发后，自动检测整个应用的变化。这意味着只要这些异步任务发生，Angular就会从根组件开始遍历组件树，检查数据的变化，性能开销较大。
- 开发者也可通过ChangeDetectorRef手动控制检测时机，如markForCheck、detectChanges等方法，对于性能敏感的组件可以优化检测频率。
React：
- 使用单向数据流，基于状态变化驱动视图更新。React采用的是shouldComponentUpdate生命周期方法（在React v16.3+ 可以使用React.PureComponent或React.memo）来控制组件是否需要重新渲染。默认情况下，当组件的props或state发生变化时，React会触发重新渲染，但通过上述机制可以根据特定条件阻止不必要的渲染。
- React的变更检测基于diffing算法，通过对比虚拟DOM树的差异来确定实际需要更新的DOM节点，减少DOM操作。

Angular：
- Angular虽然没有像React那样明确提出虚拟DOM的概念，但内部使用了类似的机制来优化DOM更新。它通过Renderer2抽象层来操作DOM，在变更检测后，将变化应用到真实DOM上。
- 不过，Angular更侧重于基于指令（Directives）的声明式编程，对DOM的操作更多是通过指令来实现，相对来说，虚拟DOM的应用没有React那么突出。
React：
- 虚拟DOM是React的核心概念之一。React在每次状态变化时，会创建一棵新的虚拟DOM树，然后与之前的虚拟DOM树进行对比（diffing算法），找出差异，最后将这些差异更新到真实DOM上。
- 这种方式大大减少了直接操作真实DOM的次数，提高了性能，尤其是在频繁更新的场景下效果显著。

Angular：
- 提供了OnPush变化检测策略，当组件的输入属性（@Input()）引用不变，并且没有注册任何事件监听器时，该组件的变更检测会被标记为OnPush。只有当输入属性引用变化、组件接收到事件（如点击、HTTP响应等）时才会触发该组件及其子组件的变更检测，从而提高性能。
- 还支持懒加载模块，通过将应用分割成多个模块，在需要时加载，减少初始加载时间。
React：
- 除了前面提到的shouldComponentUpdate、React.PureComponent和React.memo外，React还支持React.lazy和Suspense进行代码分割和懒加载，类似于Angular的懒加载模块，提高应用的初始加载性能。
- React还提供了useMemo和useCallback钩子，用于缓存计算结果和回调函数，避免不必要的重新计算和重新创建，优化组件渲染性能。

选择Angular的场景：
- 如果项目对双向数据绑定有强烈需求，并且开发者对依赖注入、模块化等概念熟悉，Angular是一个不错的选择。在大型企业级项目中，Angular的架构和工具链有助于代码的组织和维护。
- 对于对SEO友好的项目，Angular的服务器端渲染（Universal）功能可以在服务器端生成HTML，有利于搜索引擎抓取。
选择React的场景：
- 当项目需要高度灵活的组件化开发，并且对渲染性能有较高要求，尤其是在频繁更新UI的场景下，React的虚拟DOM和单向数据流能带来明显的性能优势。
- 如果项目需要与原生移动开发（React Native）集成，React是不二之选，因为它可以实现代码的跨平台复用。
- 社区生态丰富，大量的开源组件和工具库可以加速开发过程，适合快速迭代的项目。

知识考点