Add traditional Chinese translation.

website/docs/advanced-topics/server-side-rendering.mdx

@@ -186,8 +186,7 @@ fn App() -> Html {
 fn main() {
     let renderer = Renderer::<App>::new();
 
-    // hydrates everything under body element, removes trailing
-    // elements (if any).
+    // 直接在 body 元素下注水，并移除可能有的任何尾随元素。
     renderer.hydrate();
 }
 ```

website/docs/concepts/basic-web-technologies/web-sys.mdx

@@ -69,7 +69,6 @@ fn inheritance_of_text_area(text_area: HtmlTextAreaElement) {
 
     // The AsRef implementations allow you to treat the HtmlTextAreaElement
     // as an &EventTarget.
-
     let event_target: &EventTarget = text_area.as_ref();
 
 }

website/i18n/zh-Hans/docusaurus-plugin-content-docs/current/advanced-topics/optimizations.mdx

@@ -38,10 +38,6 @@ Yew 的最大缺点是编译所需的时间很长。编译项目所需的时间
 
 ## 减小二进制文件大小
 
--   optimize Rust code
--   `cargo.toml` \( defining release profile \)
--   optimize wasm code using `wasm-opt`
-
 -   优化 Rust 代码
 -   `cargo.toml`（定义发布配置文件）
 -   使用 `wasm-opt` 优化 wasm 代码

website/i18n/zh-Hans/docusaurus-plugin-content-docs/current/advanced-topics/server-side-rendering.mdx

@@ -29,10 +29,8 @@ fn App() -> Html {
     html! {<div>{"Hello, World!"}</div>}
 }
 
-// we use `flavor = "current_thread"` so this snippet can be tested in CI,
-// where tests are run in a WASM environment. You likely want to use
-// the (default) `multi_thread` favor as:
-// #[tokio::main]
+// 我们在使用 `flavor = "current_thread"` 以保证这个示例可以在 CI 中的 WASM 环境运行,
+// 如果你希望使用多线程的话，可以使用默认的 `#[tokio::main]` 宏
 #[tokio::main(flavor = "current_thread")]
 async fn no_main() {
     let renderer = ServerRenderer::<App>::new();

website/i18n/zh-Hans/docusaurus-plugin-content-docs/current/concepts/basic-web-technologies/web-sys.mdx

@@ -29,7 +29,7 @@ use web_sys::{
 };
 
 fn inheritance_of_text_area(text_area: HtmlTextAreaElement) {
-    // HtmlTextAreaElement is <textarea> in html.
+    // HtmlTextAreaElement 是 HTML 中的 <textarea>。
     let html_element: &HtmlElement = text_area.deref();
 
     let element: &Element = html_element.deref();
@@ -38,30 +38,24 @@ fn inheritance_of_text_area(text_area: HtmlTextAreaElement) {
 
     let event_target: &EventTarget = node.deref();
 
-    // Notice we have moved from web-sys types now into built-in
-    // JavaScript types which are in the js-sys crate.
+    // 注意我们现在已经从 web-sys 类型转移到内置的 JavaScript 类型，
+    // 这些类型在 js-sys crate 中。
     let object: &js_sys::Object = event_target.deref();
 
-    // Notice we have moved from js-sys type to the root JsValue from
-    // the wasm-bindgen crate.
+    // 注意我们现在已经从 js-sys 类型转移到 wasm-bindgen crate 中的根 JsValue。
     let js_value: &wasm_bindgen::JsValue = object.deref();
 
-    // Using deref like this means we have to manually traverse
-    // the inheritance tree, however, you can call JsValue methods
-    // on the HtmlTextAreaElement type.
-    // The `is_string` method comes from JsValue.
+    // 这样使用 deref 意味着我们必须手动遍历继承树。
+    // 但是，您可以在 HtmlTextAreaElement 类型上调用 JsValue 方法。
     assert!(!text_area.is_string());
 
-    // empty function just to prove we can pass HtmlTextAreaElement as a
-    // &EventTarget.
+    // 这个空函数只是为了证明我们可以将 HtmlTextAreaElement 作为 &EventTarget 传递。
     fn this_function_only_takes_event_targets(targets: &EventTarget) {};
 
-    // The compiler will walk down the deref chain in order to match the types here.
+    // 编译器将沿着 deref 链向下走，以匹配这里的类型。
     this_function_only_takes_event_targets(&text_area);
 
-    // The AsRef implementations allow you to treat the HtmlTextAreaElement
-    // as an &EventTarget.
-
+    // AsRef 实现允许您将 HtmlTextAreaElement 视为 &EventTarget。
     let event_target: &EventTarget = text_area.as_ref();
 
 }
@@ -84,7 +78,7 @@ use yew::NodeRef;
 
 fn with_node_ref_cast(node_ref: NodeRef) {
     if let Some(input) = node_ref.cast::<HtmlInputElement>() {
-        // do something with HtmlInputElement
+        // 在这里处理 HtmlInputElement
     }
 }
 ```
@@ -101,7 +95,7 @@ fn with_jscast(node_ref: NodeRef) {
     if let Some(input) = node_ref
         .get()
         .and_then(|node| node.dyn_into::<HtmlInputElement>().ok()) {
-        // do something with HtmlInputElement
+        // 在这里处理 HtmlInputElement
     }
 }
 ```
@@ -117,10 +111,10 @@ fn with_jscast(node_ref: NodeRef) {
 
 ```js
 document.getElementById('mousemoveme').onmousemove = (e) => {
-    // e = Mouse event.
+    // e 为鼠标事件对象
     var rect = e.target.getBoundingClientRect()
-    var x = e.clientX - rect.left //x position within the element.
-    var y = e.clientY - rect.top //y position within the element.
+    var x = e.clientX - rect.left // 元素内的 x 位置。
+    var y = e.clientY - rect.top  // 元素内的 y 位置。
     console.log('Left? : ' + x + ' ; Top? : ' + y + '.')
 }
 ```
@@ -135,7 +129,7 @@ wasm-bindgen = "0.2"
 
 [dependencies.web-sys]
 version = "0.3"
-# We need to enable all the web-sys features we want to use!
+# 需要启用所有我们想要使用的 web-sys 特性！
 features = [
     "console",
     "Document",
@@ -168,8 +162,7 @@ Document::new()
     .unchecked_into::<HtmlElement>()
     .set_onmousemove(mousemove.as_ref().dyn_ref());
 
-// we now need to save the `mousemove` Closure so that when
-// this event fires the closure is still in memory.
+// 我们现在需要保存 `mousemove` 闭包，以便在事件触发时闭包仍然在内存中。
 ```
 
 这个版本更加冗长，但你可能会注意到其中的一部分是由于失败类型提醒我们，一些函数调用有必须保持的不变量，否则将在 Rust 中引发 panic。另一个冗长的部分是调用 `JsCast` 来将不同类型转换为特定类型，以便调用其特定方法。
@@ -181,8 +174,7 @@ Document::new()
 ```toml title=Cargo.toml
 [dependencies.web-sys]
 version = "0.3"
-# We need to enable the `DomRect` feature to use the
-# `get_bounding_client_rect` method.
+# 我们需要启用 `DomRect` 特性以使用 `get_bounding_client_rect` 方法。
 features = [
     "console",
     "HtmlElement",

website/i18n/zh-Hans/docusaurus-plugin-content-docs/current/concepts/contexts.mdx

@@ -66,7 +66,7 @@ fn NavButton(_props: &ThemeProps) -> Html {
     }
 }
 
-/// App root
+/// App 根节点
 #[function_component]
 fn App() -> Html {
     let theme = Theme {
@@ -96,14 +96,14 @@ fn App() -> Html {
 use yew::prelude::*;
 
 
-/// App theme
+/// App 主题
 #[derive(Clone, Debug, PartialEq)]
 struct Theme {
     foreground: String,
     background: String,
 }
 
-/// Main component
+/// 主组件
 #[function_component]
 pub fn App() -> Html {
     let ctx = use_state(|| Theme {
@@ -112,18 +112,17 @@ pub fn App() -> Html {
     });
 
     html! {
-        // `ctx` is type `Rc<UseStateHandle<Theme>>` while we need `Theme`
-        // so we deref it.
-        // It derefs to `&Theme`, hence the clone
+        // `ctx` 是 `Rc<UseStateHandle<Theme>>` 类型，而我们需要 `Theme`
+        // 所以我们对它进行解引用。
         <ContextProvider<Theme> context={(*ctx).clone()}>
-            // Every child here and their children will have access to this context.
+            // 这里的每个子组件及其子组件都将访问此上下文。
             <Toolbar />
         </ContextProvider<Theme>>
     }
 }
 
-/// The toolbar.
-/// This component has access to the context
+/// 工具栏
+/// 此组件可以访问上下文。
 #[function_component]
 pub fn Toolbar() -> Html {
     html! {
@@ -133,9 +132,8 @@ pub fn Toolbar() -> Html {
     }
 }
 
-/// Button placed in `Toolbar`.
-/// As this component is a child of `ThemeContextProvider` in the component tree, it also has access
-/// to the context.
+/// 放置在 `Toolbar` 中的按钮
+/// 由于此组件是组件树中 `ThemeContextProvider` 的子组件，它也可以访问上下文。
 #[function_component]
 pub fn ThemedButton() -> Html {
     let theme = use_context::<Theme>().expect("no ctx found");

website/i18n/zh-Hans/docusaurus-plugin-content-docs/current/concepts/function-components/callbacks.mdx

@@ -13,8 +13,8 @@ let cb: Callback<String, String> = Callback::from(move |name: String| {
     format!("Bye {}", name)
 });
 
-let result = cb.emit(String::from("Bob")); // call the callback
-// web_sys::console::log_1(&result.into()); // if uncommented will print "Bye Bob"
+let result = cb.emit(String::from("Bob"));  // 调用回调函数
+// web_sys::console::log_1(&result.into()); // 如果取消注释，将打印 "Bye Bob"
 ```
 
 ## 将回调函数作为属性传递
@@ -37,12 +37,12 @@ fn HelloWorld(props: &Props) -> Html {
     html! { "Hello" }
 }
 
-// Then supply the prop
+// 然后提供属性 (Props)
 #[function_component]
 fn App() -> Html {
     let on_name_entry: Callback<String> = Callback::from(move |name: String| {
         let greeting = format!("Hey, {}!", name);
-        // web_sys::console::log_1(&greeting.into()); // if uncommented will print
+        // web_sys::console::log_1(&greeting.into()); // 如果取消注释，这里会打印文本
     });
 
     html! { <HelloWorld {on_name_entry} /> }
@@ -63,7 +63,7 @@ use yew::{function_component, html, Html, Properties, Callback};
 fn App() -> Html {
     let onclick = Callback::from(move |_| {
         let greeting = String::from("Hi there");
-        // web_sys::console::log_1(&greeting.into()); // if uncommented will print
+        // web_sys::console::log_1(&greeting.into()); // 如果取消注释，这里会打印文本
     });
 
     html! {

website/i18n/zh-Hans/docusaurus-plugin-content-docs/current/concepts/function-components/children.mdx

@@ -22,15 +22,15 @@ fn App() -> Html {
 #[derive(Properties, PartialEq)]
 pub struct Props {
     // highlight-next-line
-    pub children: Html, // the field name `children` is important!
+    pub children: Html, // `children` 键很重要！
 }
 
 #[function_component]
 fn HelloWorld(props: &Props) -> Html {
     html! {
         <div class="very-stylized-container">
     // highlight-next-line
-            { props.children.clone() } // you can forward children like this
+            { props.children.clone() } // 可以靠这种方式转发子元素
         </div>
     }
 }

website/i18n/zh-Hans/docusaurus-plugin-content-docs/current/concepts/function-components/generics.mdx

@@ -32,12 +32,12 @@ where
     }
 }
 
-// then can be used like this
+// 之后可以像这样使用
 html! {
     <MyGenericComponent<i32> data=123 />
 };
 
-// or
+// 或者
 html! {
     <MyGenericComponent<String> data={"foo".to_string()} />
 };

website/i18n/zh-Hans/docusaurus-plugin-content-docs/current/concepts/function-components/introduction.mdx

@@ -3,62 +3,30 @@ title: '函数组件'
 slug: /concepts/function-components
 ---
 
-Let's revisit this previous statement:
-
 让我们重新回顾一下之前的标语：
 
-> Yew centrally operates on the idea of keeping everything that a reusable piece of
-> UI may need in one place - rust files.
-
 > Yew 的核心思想是将可重用的 UI 部分所需的所有内容集中在一个地方 - Rust 文件中。
 
-We will refine this statement, by introducing the concept that will define the logic and
-presentation behavior of an application: "components".
-
 我们将通过引入将定义应用程序的逻辑和呈现行为的概念来完善这个陈述："组件"。
 
-## What are Components?
-
 ## 什么是组件？
 
-Components are the building blocks of Yew.
-
 组件是 Yew 的构建块。
 
-They:
-
 它们应当：
 
--   Take arguments in form of [Props](./properties.mdx)
--   Can have their own state
--   Compute pieces of HTML visible to the user (DOM)
-
 -   以 [Props](./properties.mdx) 的形式接受参数
 -   可以拥有自己的状态
 -   计算用户可见的 HTML 片段（DOM）
 
-## Two flavors of Yew Components
-
 ## Yew 组件的两种风味
 
-You are currently reading about function components - the recommended way to write components
-when starting with Yew and when writing simple presentation logic.
-
 您当前正在阅读有关函数组件的内容 - 这是在开始使用 Yew 时以及在编写简单的呈现逻辑时编写组件的推荐方式。
 
-There is a more advanced, but less accessible, way to write components - [Struct components](advanced-topics/struct-components/introduction.mdx).
-They allow very detailed control, though you will not need that level of detail most of the time.
-
 还有一种更高级但不太容易访问的编写组件的方式 - [结构组件](advanced-topics/struct-components/introduction.mdx)。它们允许非常详细的控制，尽管大多数情况下您不需要那么详细的控制。
 
-## Creating function components
-
 ## 创建函数组件
 
-To create a function component add the `#[function_component]` attribute to a function.
-By convention, the function is named in PascalCase, like all components, to contrast its
-use to normal html elements inside the `html!` macro.
-
 要创建一个函数组件，请将 `#[function_component]` 属性添加到一个函数中。按照惯例，函数的名称采用 PascalCase，与 `html!` 宏中的普通 html 元素形成对比。
 
 ```rust
@@ -69,22 +37,15 @@ fn HelloWorld() -> Html {
     html! { "Hello world" }
 }
 
-// Then somewhere else you can use the component inside `html!`
+// 然后在其他地方，您可以在 `html!` 中使用组件
 #[function_component]
 fn App() -> Html {
     html! { <HelloWorld /> }
 }
 ```
 
-## What happens to components
-
 ## 组件内部发生了什么
 
-When rendering, Yew will build a virtual tree of these components.
-It will call the view function of each (function) component to compute a virtual version (VDOM) of the DOM
-that you as the library user see as the `Html` type.
-For the previous example, this would look like this:
-
 在渲染时，Yew 将构建这些组件的虚拟树。它将调用每个（函数）组件的 view 函数来计算 DOM 的虚拟版本（VDOM），您作为库用户将其视为 `Html` 类型。对于上面的示例，这将如下所示：
 
 ```xhtml
@@ -95,16 +56,10 @@ For the previous example, this would look like this:
 </App>
 ```
 
-When an update is necessary, Yew will again call the view function and reconcile the new virtual DOM with its
-previous version and only propagate the new/changed/necessary parts to the actual DOM.
-This is what we call **rendering**.
-
 当需要更新时，Yew 将再次调用 view 函数，并将新的虚拟 DOM 与其之前的版本进行协调，并仅将新的/更改的/必要的部分传 播到实际的 DOM。这就是我们所说的 **渲染**。
 
 :::note
 
-Behind the scenes, `Html` is just an alias for `VNode` - a virtual node.
-
 实际上，`Html` 只是 `VNode` 的别名 - 一个虚拟节点。
 
 :::

website/i18n/zh-Hans/docusaurus-plugin-content-docs/current/concepts/function-components/properties.mdx

@@ -264,7 +264,7 @@ fn Hello(&Props { is_loading, ref name }: &Props) -> Html {
 fn App() -> Html {
     // highlight-start
     let pre_made_props = yew::props! {
-        Props {} // Notice we did not need to specify name prop
+        Props {} // 注意我们不需要指定 name 属性
     };
     // highlight-end
     html! { <Hello ..pre_made_props /> }

website/i18n/zh-Hans/docusaurus-plugin-content-docs/current/concepts/function-components/state.mdx

@@ -1,5 +1,4 @@
 ---
-title: 'State'
 title: '状态'
 ---