在之前的 Angular v15 中,Angular 团队通过将独立 API 从开发者预览版升级至稳定版,在 Angular 的简易性和开发者体验方面达到了一个重要的里程碑。如今,Angular 将继续这一改进的势头,发布了自 Angular 最初推出以来最大的一次版本更新;在 Reactivity、服务器端渲染和工具方面取得了巨大的飞跃。
重新思考 Reactivity
作为 v16 版本的一部分,Angular 带来了全新的 Reactivity 模型的开发者预览,它为性能和开发者体验带来了显著的改进。
完全向后兼容并可与当前系统互操作的,并且能够:
- 通过减少变化检测过程中的计算次数,提高运行时的性能。
- 为 Reactivity 带来了更简单的 mental 模型,使其清楚地了解视图的依赖性和通过应用程序的数据流。
- 启用细粒度的 Reactivity,在未来的版本中,它将允许我们只检查受影响组件的变化。
- 在未来的版本中,通过使用 Signals 在模型发生变化时通知框架,使 Zone.js 成为可选的。
- 提供计算属性,而不会在每个变化检测周期中重新计算
- 实现了更好的与 RxJS 的互操作性
服务器端渲染和 hydration 增强
根据 Angular 的年度开发者调查,服务器端渲染是 Angular 的第一大改进方向。在过去的几个月里,Angular 与 Chrome Aurora 团队合作,改善了 hydration 和服务器端渲染的性能和 DX。今天,Angular 带来了完整应用非破坏性 hydration 的开发者预览。
在新的完整应用非破坏性 hydration 中,Angular 不再从头开始重新渲染应用。相反,该框架在构建内部数据结构时查找现有的 DOM 节点,并将事件监听器附加到这些节点上。
这样做的好处是:
- 对终端用户来说,页面上没有内容的闪烁
- 在某些情况下有更好的 Web Core Vitals
- 面向未来的架构,可以用我们今年晚些时候推出的基元实现细粒度的代码加载。
- 只需几行代码就能与现有的应用程序轻松集成
- 对于执行手动 DOM 操作的组件,在模板中使用
ngSkipHydration
属性逐步采用 hydration
新的服务器端渲染功能
作为 v16 版本的一部分,Angular 还更新了 Angular Universal 的 ng add schematics
,它使你能够使用独立的 API 向项目添加服务器端渲染。还为内联样式引入了对更严格的内容安全策略的支持。
改进了独立组件、指令和管道的工具
Angular 是一个被数以百万计的开发者用于很多关键任务的应用程序的框架,我们认真对待重大变化。Angular 在几年前开始探索独立的 API,现在经过一年多的收集反馈和对 API 的迭代,Angular 想鼓励开发者更广泛地采用这些 API。
为了支持开发者将他们的应用程序过渡到独立的 API,Angular 开发了迁移示意图和独立迁移指南。一旦你在你的项目目录中运行:
ng generate @angular/core:standalone
该计划将转换你的代码,删除不必要的 NgModules
类,并最终改变项目的引导结构以使用独立的 API。
独立的 ng new
作为 Angular v16 的一部分,你可以从一开始就以独立的方式创建新的项目。要尝试独立模式的开发者预览,请确保你在 Angular CLI v16 上并运行:
ng new --standalone
你会得到一个更简单的项目输出,没有任何NgModules
。此外,项目中的所有生成器都会产生独立的指令、组件和管道。
更多详情可查看:https://github.com/angular/angular/releases/tag/16.0.0