From 10e86b9fc3b8a3ed51f0c94df4e6b39ef206b25a Mon Sep 17 00:00:00 2001 From: rudy0628 Date: Thu, 1 Dec 2022 16:26:37 +0800 Subject: [PATCH 1/4] docs/faq-internals.html translate finished --- content/docs/faq-internals.md | 19 ++++++++++--------- 1 file changed, 10 insertions(+), 9 deletions(-) diff --git a/content/docs/faq-internals.md b/content/docs/faq-internals.md index da7f96be0..695631ffa 100644 --- a/content/docs/faq-internals.md +++ b/content/docs/faq-internals.md @@ -1,23 +1,24 @@ --- id: faq-internals -title: Virtual DOM and Internals +title: Virtual DOM 及它的本質 permalink: docs/faq-internals.html layout: docs category: FAQ --- -### What is the Virtual DOM? {#what-is-the-virtual-dom} +### 什麼是 Virtual DOM? {#what-is-the-virtual-dom} -The virtual DOM (VDOM) is a programming concept where an ideal, or "virtual", representation of a UI is kept in memory and synced with the "real" DOM by a library such as ReactDOM. This process is called [reconciliation](/docs/reconciliation.html). +Virtual DOM (VDOM) 是一種程式概念，其中 UI 的理想或"Virtual"表示保存在內存中，並通過 ReactDOM 等函式庫與"真實"DOM 同步。這個過程叫做 [reconciliation](/docs/reconciliation.html)。 -This approach enables the declarative API of React: You tell React what state you want the UI to be in, and it makes sure the DOM matches that state. This abstracts out the attribute manipulation, event handling, and manual DOM updating that you would otherwise have to use to build your app. +這種方法啟用了 React 的 declarative API：您告訴 React 您希望 UI 處於什麼狀態，它會確保 DOM 與該狀態匹配。這抽像出了您在構建應用程序時必須使用的屬性操作、事件處理和手動 DOM 更新。 -Since "virtual DOM" is more of a pattern than a specific technology, people sometimes say it to mean different things. In React world, the term "virtual DOM" is usually associated with [React elements](/docs/rendering-elements.html) since they are the objects representing the user interface. React, however, also uses internal objects called "fibers" to hold additional information about the component tree. They may also be considered a part of "virtual DOM" implementation in React. -### Is the Shadow DOM the same as the Virtual DOM? {#is-the-shadow-dom-the-same-as-the-virtual-dom} +由於"Virtual DOM"與其說是一種特定技術，不如說是一種模式，因此人們有時會說它有不同的含義。 在 React 世界中，術語"Virtual DOM"通常與 [React elements](/docs/rendering-elements.html) 因為它們是代表用戶界面的物件。然而，React 還使用稱為"fibers"的內部物件來保存有關 component tree 的附加資訊。它們也可以被視為 React 中"Virtual DOM"實現的一部分。 -No, they are different. The Shadow DOM is a browser technology designed primarily for scoping variables and CSS in web components. The virtual DOM is a concept implemented by libraries in JavaScript on top of browser APIs. +### Shadow DOM 和 Virtual DOM 一樣嗎？{#is-the-shadow-dom-the-same-as-the-virtual-dom} -### What is "React Fiber"? {#what-is-react-fiber} +不，它們是不同的。Shadow DOM 是一種瀏覽器技術，主要設計用於在 Web 組件中定義 variables 和 CSS。Virtual DOM 是一個概念，由函式庫在瀏覽器 API 之上用 JavaScript 實現。 -Fiber is the new reconciliation engine in React 16. Its main goal is to enable incremental rendering of the virtual DOM. [Read more](https://github.com/acdlite/react-fiber-architecture). +### 什麼是"React Fiber"? {#what-is-react-fiber} + +Fiber 是 React 16 中新的 reconciliation 引擎。它的主要目標是啟用 Virtual DOM 的增量渲染。[閱讀更多](https://github.com/acdlite/react-fiber-architecture)。 \ No newline at end of file From 92c1e8051ef53942f081d6977701e40806d9b90f Mon Sep 17 00:00:00 2001 From: rudy0628 Date: Mon, 5 Dec 2022 12:31:32 +0800 Subject: [PATCH 2/4] docs/faq-internals.html translate finished --- content/docs/faq-internals.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/faq-internals.md b/content/docs/faq-internals.md index 695631ffa..d5b3bf388 100644 --- a/content/docs/faq-internals.md +++ b/content/docs/faq-internals.md @@ -21,4 +21,4 @@ Virtual DOM (VDOM) 是一種程式概念，其中 UI 的理想或"Virtual"表示 ### 什麼是"React Fiber"? {#what-is-react-fiber} -Fiber 是 React 16 中新的 reconciliation 引擎。它的主要目標是啟用 Virtual DOM 的增量渲染。[閱讀更多](https://github.com/acdlite/react-fiber-architecture)。 \ No newline at end of file +Fiber 是 React 16 中新的 reconciliation 引擎。它的主要目標是啟用 Virtual DOM 的增量渲染。[閱讀更多](https://github.com/acdlite/react-fiber-architecture)。 From 05e91891066cb39be719bafb39783965a97b428c Mon Sep 17 00:00:00 2001 From: rudy0628 Date: Fri, 19 May 2023 09:31:41 +0800 Subject: [PATCH 3/4] correct content from suggested fixes --- content/blog/2022-03-08-react-18-upgrade-guide.md | 2 +- content/docs/faq-internals.md | 7 +++---- content/docs/reference-glossary.md | 2 +- 3 files changed, 5 insertions(+), 6 deletions(-) diff --git a/content/blog/2022-03-08-react-18-upgrade-guide.md b/content/blog/2022-03-08-react-18-upgrade-guide.md index c685aaa65..336555b49 100644 --- a/content/blog/2022-03-08-react-18-upgrade-guide.md +++ b/content/blog/2022-03-08-react-18-upgrade-guide.md @@ -125,7 +125,7 @@ Finally, this API will continue to work for rendering e-mails: For more information on the changes to server rendering APIs, see the working group post on [Upgrading to React 18 on the server](https://github.com/reactwg/react-18/discussions/22), a [deep dive on the new Suspense SSR Architecture](https://github.com/reactwg/react-18/discussions/37), and [Shaundai Person’s](https://twitter.com/shaundai) talk on [Streaming Server Rendering with Suspense](https://www.youtube.com/watch?v=pj5N-Khihgc) at React Conf 2021. -## Updates to TypeScript definitions +## Updates to TypeScript definitions {#updates-to-typescript-definitions} If your project uses TypeScript, you will need to update your `@types/react` and `@types/react-dom` dependencies to the latest versions. The new types are safer and catch issues that used to be ignored by the type checker. The most notable change is that the `children` prop now needs to be listed explicitly when defining props, for example: diff --git a/content/docs/faq-internals.md b/content/docs/faq-internals.md index d5b3bf388..94487d1f8 100644 --- a/content/docs/faq-internals.md +++ b/content/docs/faq-internals.md @@ -8,13 +8,12 @@ category: FAQ ### 什麼是 Virtual DOM? {#what-is-the-virtual-dom} -Virtual DOM (VDOM) 是一種程式概念，其中 UI 的理想或"Virtual"表示保存在內存中，並通過 ReactDOM 等函式庫與"真實"DOM 同步。這個過程叫做 [reconciliation](/docs/reconciliation.html)。 +Virtual DOM（VDOM）是一種程式概念，其中 UI 的理想或「虛擬」表示保存在記憶體中，並通過 ReactDOM 等函式庫與「真實」的 DOM 同步。這個過程叫做 [reconciliation](/docs/reconciliation.html)。 -這種方法啟用了 React 的 declarative API：您告訴 React 您希望 UI 處於什麼狀態，它會確保 DOM 與該狀態匹配。這抽像出了您在構建應用程序時必須使用的屬性操作、事件處理和手動 DOM 更新。 +這種方法啟用了 React 的宣告式 API：你告訴 React 你希望 UI 處於什麼狀態，它會確保 DOM 與該狀態匹配。這抽像出了你在構建應用程式時必須使用的屬性操作、事件處理和手動 DOM 更新。 -由於"Virtual DOM"與其說是一種特定技術，不如說是一種模式，因此人們有時會說它有不同的含義。 在 React 世界中，術語"Virtual DOM"通常與 [React elements](/docs/rendering-elements.html) 因為它們是代表用戶界面的物件。然而，React 還使用稱為"fibers"的內部物件來保存有關 component tree 的附加資訊。它們也可以被視為 React 中"Virtual DOM"實現的一部分。 - +與其「Virtual DOM」說是一種特定技術，不如說是一種模式，因此人們有時會說它有不同的含義。 在 React 世界中，術語「Virtual DOM」通常與 [React elements](/docs/rendering-elements.html) 因為它們是代表用戶界面的物件。然而，React 還使用稱為「fibers」的內部物件來保存有關 component tree 的附加資訊。它們也可以被視為 React 中「Virtual DOM」實現的一部分。 ### Shadow DOM 和 Virtual DOM 一樣嗎？{#is-the-shadow-dom-the-same-as-the-virtual-dom} 不，它們是不同的。Shadow DOM 是一種瀏覽器技術，主要設計用於在 Web 組件中定義 variables 和 CSS。Virtual DOM 是一個概念，由函式庫在瀏覽器 API 之上用 JavaScript 實現。 diff --git a/content/docs/reference-glossary.md b/content/docs/reference-glossary.md index 826ac1eb3..19bbfe9af 100644 --- a/content/docs/reference-glossary.md +++ b/content/docs/reference-glossary.md @@ -126,7 +126,7 @@ class Welcome extends React.Component { 生命週期方法是用來在 component 不同階段來執行自訂功能。以下的事件都有生命週期方法：當 component 被建立和加入在 DOM 裏（[mounting](/docs/react-component.html#mounting)），當 component 更新，以及從 DOM 中 unmount 或移除時。 -## [Controlled](/docs/forms.html#controlled-components) 與 [Uncontrolled Components](/docs/uncontrolled-components.html) +## [Controlled](/docs/forms.html#controlled-components) 與 [Uncontrolled Components](/docs/uncontrolled-components.html) {#controlled-與-uncontrolled-componentsdocsuncontrolled-componentshtml} React 有兩個不同的方案處理表格輸入。 From c721fc9bea69361756680ddacc6974e24905167d Mon Sep 17 00:00:00 2001 From: rudy0628 Date: Fri, 19 May 2023 09:49:58 +0800 Subject: [PATCH 4/4] remove the surplus line in line 15 and move title to line 17 --- content/docs/faq-internals.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/faq-internals.md b/content/docs/faq-internals.md index 94487d1f8..64aa96796 100644 --- a/content/docs/faq-internals.md +++ b/content/docs/faq-internals.md @@ -12,8 +12,8 @@ Virtual DOM（VDOM）是一種程式概念，其中 UI 的理想或「虛擬」 這種方法啟用了 React 的宣告式 API：你告訴 React 你希望 UI 處於什麼狀態，它會確保 DOM 與該狀態匹配。這抽像出了你在構建應用程式時必須使用的屬性操作、事件處理和手動 DOM 更新。 - 與其「Virtual DOM」說是一種特定技術，不如說是一種模式，因此人們有時會說它有不同的含義。 在 React 世界中，術語「Virtual DOM」通常與 [React elements](/docs/rendering-elements.html) 因為它們是代表用戶界面的物件。然而，React 還使用稱為「fibers」的內部物件來保存有關 component tree 的附加資訊。它們也可以被視為 React 中「Virtual DOM」實現的一部分。 + ### Shadow DOM 和 Virtual DOM 一樣嗎？{#is-the-shadow-dom-the-same-as-the-virtual-dom} 不，它們是不同的。Shadow DOM 是一種瀏覽器技術，主要設計用於在 Web 組件中定義 variables 和 CSS。Virtual DOM 是一個概念，由函式庫在瀏覽器 API 之上用 JavaScript 實現。