從 0.18.0 到 0.19.0

Yew 0.19.0 已有許多變更，因此本轉移指南將不會包含所有變更。

僅包含最有影響力的變更，其他部分應可由 cargo 發現。

大多數屬性的 html! 大括弧需求

html! 巨集的語法已更新，因此在許多情況下，您需要使用大括弧來括住屬性。

無效

let super_age = 1;
html!{
    <JapaneseYew
        age=super_age // ! Will throw an error
    >
}

有效

let super_age = 1;
html!{
    <JapaneseYew
        age={super_age} // Correct
    >
}

速記

已加入速記初始化

let age = 1;
html!{
    <JapaneseYew
        {age}
    >
}

社群提供了一份協助自動化更新的正規表示法，不過我們無法保證它一直都能運行。

它會在遇到閉包（特別是 |_| 語法）時中斷。

使用 =(?![{">=\s])([^\s></]*(\s!{0,1}[=|&]{2}\s[^\s></]*)*) 尋找

用 ={$1} 取代

函式元件

函式元件 是一種撰寫元件的新方式，所需的樣板比結構性對應物少。

雖然此變更並不會強制您變更程式碼庫，但從 0.18 移轉到 0.19 期間，此移轉時間可能會是一開始在程式碼庫中使用它們的好時機。

結構元件生命週期方法及 ctx

結構元件 也對其 API 進行了變更。

ShouldRender 已移除，改採用 bool

ShouldRender 已移除，改採用 bool，您可以在整個程式碼庫中找到所有更換的部分。

ctx、props、link

結構元件不再持有 props 和 link，而是改在生命週期方法中接收 ctx: &Context<Self> 參數，之後可透過它存取 ctx.props() -> &Properties 和 ctx.link() -> &Scope<Self>。

您必須從元件結構欄位中移除 link 和 props，因為所有生命週期方法都已更新。

元件特性中的生命週期方法

有關新的 API，請參閱 元件特性

web-sys 已不再重複匯出

加入 web-sys 作為專案相依性，並逐一加入必要的特徵，例如 Event 或 Window。

服務

在此次更新期間，所有服務都已移除，改採用以社群為導向的解決方案，例如 gloo

完全移除它。yew-services 會加入一層抽象，讓呼叫外部資源更簡單。這相當好，但這層抽象應該專屬於 Yew。如果能存在一個與架構無關的抽象，那會更好。

• ConsoleService 採用 gloo-console 或 weblog 取代。
• DialogService 使用 gloo-dialogs 取代。
• IntervalService 使用 gloo-timers 取代。
• KeyboardService yew 中的 on*事件處理程式已經處理過了。使用這項服務會更麻煩，因為它需要使用 NodeRef 才能呼叫它提供的任何函數。

let onkeydown = Callback::from(|e| {
    e.prevent_default();
    todo!("use `e`, just like in service methods.");
});
html! {
    <input {onkeydown} />
}

• ResizeService 使用 gloo-events 來附加監聽器。
• StorageService 使用 gloo-storage 取代。
• TimeoutService 使用 gloo-timers 取代。
• WebSocketService 使用 wasm-sockets 或 gloo-net 取代。
• FetchService 使用 reqwest 或 gloo-net 取代。

新的 Crate - yew-agent

Yew agents 已移除到獨立的 crate，請參閱 yew agents 遷移指南

結束備註

如果本指南未涵蓋某些事項，我們深感抱歉，因為這真的是一項重大的更新，我們希望未涵蓋的問題將透過 Rust 編譯器發出的錯誤訊息明確說明。