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 da7f96be0..64aa96796 100644 --- a/content/docs/faq-internals.md +++ b/content/docs/faq-internals.md @@ -1,23 +1,23 @@ --- 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 的理想或「虛擬」表示保存在記憶體中,並通過 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 的宣告式 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. +與其「Virtual DOM」說是一種特定技術,不如說是一種模式,因此人們有時會說它有不同的含義。 在 React 世界中,術語「Virtual DOM」通常與 [React elements](/docs/rendering-elements.html) 因為它們是代表用戶界面的物件。然而,React 還使用稱為「fibers」的內部物件來保存有關 component tree 的附加資訊。它們也可以被視為 React 中「Virtual DOM」實現的一部分。 -### Is the Shadow DOM the same as the Virtual DOM? {#is-the-shadow-dom-the-same-as-the-virtual-dom} +### Shadow DOM 和 Virtual DOM 一樣嗎?{#is-the-shadow-dom-the-same-as-the-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 是一種瀏覽器技術,主要設計用於在 Web 組件中定義 variables 和 CSS。Virtual DOM 是一個概念,由函式庫在瀏覽器 API 之上用 JavaScript 實現。 -### What is "React Fiber"? {#what-is-react-fiber} +### 什麼是"React Fiber"? {#what-is-react-fiber} -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). +Fiber 是 React 16 中新的 reconciliation 引擎。它的主要目標是啟用 Virtual DOM 的增量渲染。[閱讀更多](https://github.com/acdlite/react-fiber-architecture)。 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 有兩個不同的方案處理表格輸入。