Yew 中有哪些性能优化技巧，如何提升应用性能？
Yew 性能优化技巧Yew 应用虽然基于 WebAssembly 具有天然的性能优势，但通过合理的优化策略可以进一步提升应用性能。组件渲染优化1. 使用 should_render 控制渲染pub struct OptimizedComponent { value: i32, last_rendered_value: i32,}impl Component for OptimizedComponent { type Message = Msg; type Properties = Props; fn create(ctx: &Context<Self>) -> Self { Self { value: 0, last_rendered_value: 0, } } fn update(&mut self, ctx: &Context<Self>, msg: Self::Message) -> bool { match msg { Msg::Increment => { self.value += 1; true } Msg::NoChange => { // 状态变化但不需要重新渲染 self.value += 1; false } } } fn should_render(&self, ctx: &Context<Self>) -> bool { // 只在值真正变化时才渲染 self.value != self.last_rendered_value } fn rendered(&mut self, ctx: &Context<Self>, _first_render: bool) { self.last_rendered_value = self.value; } fn view(&self, ctx: &Context<Self>) -> Html { html! { <div> <p>{ "Value: " }{ self.value }</p> </div> } }}2. 使用 use_memo 记忆化计算#[function_component(MemoizedCalculation)]fn memoized_calculation() -> Html { let input1 = use_state(|| 0); let input2 = use_state(|| 0); // 只在依赖变化时重新计算 let expensive_result = use_memo( (*input1, *input2), |(a, b)| { web_sys::console::log_1(&"Computing expensive result".into()); // 模拟复杂计算 (0..1000000).fold(0i64, |acc, _| acc + 1) as i32 + a + b } ); html! { <div> <button onclick={Callback::from({ let input1 = input1.clone(); move |_| input1.set(*input1 + 1) })}> { "Increment Input 1" } </button> <button onclick={Callback::from({ let input2 = input2.clone(); move |_| input2.set(*input2 + 1) })}> { "Increment Input 2" } </button> <p>{ "Result: " }{ **expensive_result }</p> </div> }}3. 使用 use_callback 稳定回调引用#[function_component(CallbackOptimization)]fn callback_optimization() -> Html { let count = use_state(|| 0); let expensive_operation = use_state(|| 0); // 稳定的回调，只在依赖变化时重新创建 let handle_click = use_callback( count.clone(), |count, _| { count.set(*count + 1); } ); // 另一个稳定的回调 let handle_expensive = use_callback( expensive_operation.clone(), |expensive_op, value: i32| { expensive_op.set(*expensive_op + value); } ); html! { <div> <ChildComponent on_click={handle_click.clone()} /> <button onclick={Callback::from(move |_| handle_expensive.emit(10))}> { "Expensive Operation" } </button> </div> }}#[derive(Properties, PartialEq)]pub struct ChildProps { pub on_click: Callback<()>,}#[function_component(ChildComponent)]fn child_component(props: &ChildProps) -> Html { html! { <button onclick={props.on_click.clone()}> { "Click Me" } </button> }}列表渲染优化1. 使用 key 属性#[function_component(OptimizedList)]fn optimized_list() -> Html { let items = use_state(|| vec![ Item { id: 1, text: "Item 1".to_string() }, Item { id: 2, text: "Item 2".to_string() }, Item { id: 3, text: "Item 3".to_string() }, ]); let add_item = { let items = items.clone(); Callback::from(move |_| { let mut new_items = (*items).clone(); new_items.push(Item { id: new_items.len() as u32 + 1, text: format!("Item {}", new_items.len() + 1), }); items.set(new_items); }) }; html! { <div> <button onclick={add_item}>{ "Add Item" }</button> <ul> { items.iter().map(|item| { html! { <li key={item.id}> { &item.text } </li> } }).collect::<Html>() } </ul> </div> }}#[derive(Clone, PartialEq)]struct Item { id: u32, text: String,}2. 虚拟滚动use yew::prelude::*;#[function_component(VirtualScroll)]fn virtual_scroll() -> Html { let items = use_state(|| (0..1000).collect::<Vec<i32>>()); let visible_range = use_state(|| (0, 20)); // (start, end) let item_height = 50; // 每个项目的像素高度 let container_height = 1000; // 容器高度 let onscroll = { let visible_range = visible_range.clone(); Callback::from(move |e: Event| { let element: HtmlElement = e.target_unchecked_into(); let scroll_top = element.scroll_top() as i32; let start = (scroll_top / item_height).max(0); let end = (start + (container_height / item_height) + 1).min(999); visible_range.set((start, end)); }) }; let (start, end) = *visible_range; let visible_items = &items[start..=end]; html! { <div style={format!("height: {}px; overflow-y: auto;", container_height)} onscroll={onscroll}> <div style={format!("height: {}px;", items.len() * item_height)}> <div style={format!("position: absolute; top: {}px;", start * item_height)}> { visible_items.iter().map(|item| { html! { <div key={*item} style={format!("height: {}px;", item_height)}> { format!("Item {}", item) } </div> } }).collect::<Html>() } </div> </div> </div> }}状态管理优化1. 减少不必要的状态更新#[function_component(OptimizedState)]fn optimized_state() -> Html { let counter = use_state(|| 0); let display_value = use_state(|| 0); // 只在真正需要时更新显示值 let increment = { let counter = counter.clone(); let display_value = display_value.clone(); Callback::from(move |_| { counter.set(*counter + 1); // 只在特定条件下更新显示 if *counter % 10 == 0 { display_value.set(*counter); } }) }; html! { <div> <button onclick={increment}>{ "Increment" }</button> <p>{ "Counter: " }{ *counter }</p> <p>{ "Display: " }{ *display_value }</p> </div> }}2. 使用 use_reducer 优化复杂状态#[derive(Clone, PartialEq)]pub enum AppStateAction { Increment, Decrement, SetValue(i32), Reset,}fn app_state_reducer(state: i32, action: AppStateAction) -> i32 { match action { AppStateAction::Increment => state + 1, AppStateAction::Decrement => state - 1, AppStateAction::SetValue(value) => value, AppStateAction::Reset => 0, }}#[function_component(ReducerOptimization)]fn reducer_optimization() -> Html { let (state, dispatch) = use_reducer(app_state_reducer, 0); html! { <div> <button onclick={dispatch.reform(|_| AppStateAction::Increment)}> { "+" } </button> <button onclick={dispatch.reform(|_| AppStateAction::Decrement)}> { "-" } </button> <button onclick={dispatch.reform(|_| AppStateAction::Reset)}> { "Reset" } </button> <p>{ "State: " }{ *state }</p> </div> }}WebAssembly 优化1. 优化 Wasm 包大小# Cargo.toml[profile.release]opt-level = "z" # 优化大小lto = true # 链接时优化codegen-units = 1 # 更好的优化panic = "abort" # 减少恐慌处理代码strip = true # 移除符号[dependencies]wee_alloc = { version = "0.4", optional = true }[features]default = ["wee_alloc"]// lib.rs#[cfg(feature = "wee_alloc")]#[global_allocator]static ALLOC: wee_alloc::WeeAlloc = wee_alloc::WeeAlloc::INIT;2. 减少序列化开销use wasm_bindgen::prelude::*;use js_sys::Uint32Array;// 不好的做法：频繁序列化#[wasm_bindgen]pub fn process_data_serialized(data: JsValue) -> JsValue { let parsed: Vec<i32> = serde_wasm_bindgen::from_value(data).unwrap(); let result: Vec<i32> = parsed.iter().map(|x| x * 2).collect(); serde_wasm_bindgen::to_value(&result).unwrap()}// 好的做法：直接操作内存#[wasm_bindgen]pub fn process_data_in_place(array: &Uint32Array) { for i in 0..array.length() { let value = array.get(i); array.set(i, value * 2); }}网络请求优化1. 请求去重use std::collections::HashSet;use yew::prelude::*;#[function_component(RequestDeduplication)]fn request_deduplication() -> Html { let data = use_state(|| None::<String>); let loading = use_state(|| false); let pending_requests = use_mut_ref(|| HashSet::<String>::new()); let fetch_data = { let data = data.clone(); let loading = loading.clone(); let pending_requests = pending_requests.clone(); Callback::from(move |url: String| { // 检查是否已有相同请求在进行 if pending_requests.borrow().contains(&url) { return; } pending_requests.borrow_mut().insert(url.clone()); loading.set(true); spawn_local(async move { // 模拟 API 调用 gloo_timers::future::sleep(std::time::Duration::from_secs(1)).await; data.set(Some(format!("Data from {}", url))); loading.set(false); pending_requests.borrow_mut().remove(&url); }); }) }; html! { <div> <button onclick={Callback::from(move |_| fetch_data.emit("api1".to_string()))}> { "Fetch API 1" } </button> <button onclick={Callback::from(move |_| fetch_data.emit("api2".to_string()))}> { "Fetch API 2" } </button> { if *loading { html! { <p>{ "Loading..." }</p> } } else if let Some(ref value) = *data { html! { <p>{ value }</p> } }} </div> }}2. 批量请求#[function_component(BatchRequests)]fn batch_requests() -> Html { let items = use_state(|| vec!["item1", "item2", "item3"]); let results = use_state(|| Vec::<String>::new()); let loading = use_state(|| false); let fetch_batch = { let items = items.clone(); let results = results.clone(); let loading = loading.clone(); Callback::from(move |_| { loading.set(true); spawn_local(async move { // 批量请求而不是逐个请求 let batch_data = (*items).clone(); // 模拟批量 API 调用 gloo_timers::future::sleep(std::time::Duration::from_secs(1)).await; let batch_results: Vec<String> = batch_data .iter() .map(|item| format!("Result for {}", item)) .collect(); results.set(batch_results); loading.set(false); }); }) }; html! { <div> <button onclick={fetch_batch} disabled={*loading}> { if *loading { "Loading..." } else { "Fetch Batch" } } </button> <ul> { results.iter().map(|result| { html! { <li>{ result }</li> } }).collect::<Html>() } </ul> </div> }}内存优化1. 使用 use_ref 避免不必要的状态更新#[function_component(RefOptimization)]fn ref_optimization() -> Html { let counter = use_state(|| 0); let click_count = use_ref(|| 0); let increment = { let counter = counter.clone(); let click_count = click_count.clone(); Callback::from(move |_| { counter.set(*counter + 1); // 使用 ref 不会触发重新渲染 *click_count.borrow_mut() += 1; // 只在需要时记录 if *click_count.borrow() % 10 == 0 { web_sys::console::log_2( &"Total clicks:".into(), &(*click_count.borrow()).into() ); } }) }; html! { <div> <button onclick={increment}>{ "Increment" }</button> <p>{ "Counter: " }{ *counter }</p> </div> }}2. 延迟加载组件#[function_component(LazyLoad)]fn lazy_load() -> Html { let show_component = use_state(|| false); html! { <div> <button onclick={Callback::from({ let show_component = show_component.clone(); move |_| show_component.set(!*show_component) })}> { if *show_component { "Hide" } else { "Show" } } </button> { if *show_component { html! { <HeavyComponent /> } } else { html! {} }} </div> }}#[function_component(HeavyComponent)]fn heavy_component() -> Html { // 这个组件只在需要时才渲染 html! { <div> <h1>{ "Heavy Component" }</h1> <p>{ "This component is only rendered when needed" }</p> </div> }}性能监控1. 使用 Performance APIuse web_sys::Performance;#[function_component(PerformanceMonitor)]fn performance_monitor() -> Html { let render_time = use_state(|| 0.0); let measure_render = { let render_time = render_time.clone(); Callback::from(move |_| { if let Ok(performance) = Performance::new() { let start = performance.now(); // 模拟渲染操作 let _ = std::hint::black_box(42); let end = performance.now(); render_time.set(end - start); } }) }; html! { <div> <button onclick={measure_render}>{ "Measure Render" }</button> <p>{ "Render time: " }{ *render_time }{ " ms" }</p> </div> }}最佳实践总结避免不必要的渲染：使用 should_render、use_memo、use_callback优化列表渲染：使用 key 属性、虚拟滚动减少状态更新：只在必要时更新状态优化 Wasm 包大小：使用适当的编译选项减少序列化开销：直接操作内存而非序列化批量处理请求：合并多个请求为批量请求使用 ref 避免渲染：对于不需要触发渲染的数据使用 use_ref延迟加载：只在需要时加载和渲染组件监控性能：使用 Performance API 监控应用性能代码分割：将代码分割成更小的块以提高加载速度
