Angular 16添加新回應式開發模型，並強化Hydration功能提升程式效能

行動與桌面網頁應用程式開發框架Angular釋出第16個主要版本，這個版本的主要更新，包括開發團隊引入全新的回應式（Reactive）程式開發模型Angular Signals，並且改良Hydration功能，進一步提升頁面載入效能，以及在CLI添加以esbuild為基礎的高效建置系統。

Signals現在於Angular 16進入開發者預覽階段，官方表示，這個新的回應式開發模型，能夠大幅提升程式效能和開發者體驗，並且與當前系統保持相容以及互通性。Signals透過在變更偵測的過程中，減少計算的次數，達到更好的執行效能，而且由於Signals回應式心智模型更簡單，無論是應用程式的相依關係圖還是資料流，都變得更容易理解。

Signals提供更精確的回應性，能夠僅檢查受影響的元件變更，且在變更偵測周期，不需要重新運算便可使用計算屬性，也就是說，新回應式模型提供的計算屬性，不會在每次變更檢測周期中重新計算。

計算屬性是根據其他屬性或是資料來源的值，動態計算得到的屬性，過去Angular變更偵測機制，在應用程式狀態發生變化時，Angular會走訪所有綁定的屬性，重新計算所有相關表達式，因此當一個計算屬性仰賴多個變數，即是這些變數沒有發生變化，計算屬性也會重新計算，這對大型應用程式的效能會有明顯的影響。

而在Angular新的回應式模型中，加入signal、computed和effect三種基本類型，計算屬性僅會在相依的訊號或是屬性變化時才會重新計算，在變更偵測周期中不重新計算所有計算屬性，如此便可提高應用程式的效能。Signals回應式程式開發模型，也能夠降低對Zone.js的依賴，透過使用訊號就能通知框架模型發生變化。Zone.js提供了一種區域機制，可用於封裝和攔截瀏覽器中非同步活動。

開發團隊也加強了Angular中的伺服器端渲染以及Hydration功能，以提升應用程式的效能。Hydration是指當網頁先經伺服器端渲染生成靜態HTML，交由客戶端瀏覽器接管後，使其成為一個完全可互動單頁應用程式的過程。

開發者現在可以在Angular v16中，使用一個稱為非破壞性Hydration的強化Hydration功能，這使Angular客戶端不用再重頭開始渲染應用程式，而是在建置內部資料結構時，查詢現有DOM節點，並將事件監聽器直接附加到這些節點上，如此使得伺服器渲染的內容，在客戶端Hydration的時候得以保留。不重新渲染整個應用程式的優點，除了提升45％的效能之外，頁面也不會出現閃爍，進而提升用戶體驗。

Angular團隊還在CLI工具中添加esbuild建置系統，以提升建置速度，在初期測試中，對生產應用程式的冷建置，改進速度可達72％。