From 8d35e86f7fda3a480bf7f61098a0479adc10ad28 Mon Sep 17 00:00:00 2001 From: Phat Duong Date: Sun, 10 Oct 2021 22:55:20 +0700 Subject: [PATCH] Translate Codebase-Overview page --- content/docs/codebase-overview.md | 104 +++++++++++++++--------------- 1 file changed, 52 insertions(+), 52 deletions(-) diff --git a/content/docs/codebase-overview.md b/content/docs/codebase-overview.md index 5203c47e7..bcace4ea1 100644 --- a/content/docs/codebase-overview.md +++ b/content/docs/codebase-overview.md @@ -1,6 +1,6 @@ --- id: codebase-overview -title: Codebase Overview +title: Tổng quan về Codebase layout: contributing permalink: docs/codebase-overview.html prev: how-to-contribute.html @@ -9,33 +9,33 @@ redirect_from: - "contributing/codebase-overview.html" --- -This section will give you an overview of the React codebase organization, its conventions, and the implementation. +Phần này sẽ cung cấp cho bạn tổng quan về tổ chức codebase React, các quy ước của nó và cách triển khai. -If you want to [contribute to React](/docs/how-to-contribute.html) we hope that this guide will help you feel more comfortable making changes. +Nếu bạn muốn [đóng góp cho React](/docs/how-to-contribute.html), chúng tôi hy vọng rằng hướng dẫn này sẽ giúp bạn cảm thấy thuận tiện hơn khi thực hiện các thay đổi. -We don't necessarily recommend any of these conventions in React apps. Many of them exist for historical reasons and might change with time. +Chúng tôi không nhất thiết phải đề xuất bất kỳ quy ước nào trong số này trong ứng dụng React. Nhiều quy tắc này có thể thay đổi theo thời gian. ### Top-Level Folders {#top-level-folders} -After cloning the [React repository](https://github.com/facebook/react), you will see a few top-level folders in it: +Sau khi clone [React repository](https://github.com/facebook/react), bạn sẽ thấy một vài thư mục top-level trong đó: -* [`packages`](https://github.com/facebook/react/tree/main/packages) contains metadata (such as `package.json`) and the source code (`src` subdirectory) for all packages in the React repository. **If your change is related to the code, the `src` subdirectory of each package is where you'll spend most of your time.** -* [`fixtures`](https://github.com/facebook/react/tree/main/fixtures) contains a few small React test applications for contributors. -* `build` is the build output of React. It is not in the repository but it will appear in your React clone after you [build it](/docs/how-to-contribute.html#development-workflow) for the first time. +* [`packages`](https://github.com/facebook/react/tree/main/packages) chứa metadata (như `package.json`) và the source code (thư mục con `src` ) cho tất cả các package trong React repository. **Nếu thay đổi của bạn liên quan đến mã nguồn, thư mục con src của mỗi package sẽ là nơi bạn dành phần lớn thời gian để làm việc.** +* [`fixtures`](https://github.com/facebook/react/tree/main/fixtures) chứa một vài ứng dụng React kiểm thử cho những người đóng góp +* `build` là kết quả của quá trình build của React. Nó không có trong repository nhưng sẽ xuất hiện trong bản clone React của bạn sau khi bạn [build nó](/docs/how-to-contribute.html#development-workflow) lần đầu tiên -The documentation is hosted [in a separate repository from React](https://github.com/reactjs/reactjs.org). +Tài liệu được lưu trữ [trong một repository từ React](https://github.com/reactjs/reactjs.org). -There are a few other top-level folders but they are mostly used for the tooling and you likely won't ever encounter them when contributing. +Có một số thư mục top-level khác nhưng chúng chủ yếu được sử dụng cho công cụ và bạn có thể sẽ không bao giờ gặp phải khi đóng góp. ### Colocated Tests {#colocated-tests} -We don't have a top-level directory for unit tests. Instead, we put them into a directory called `__tests__` relative to the files that they test. +Chúng tôi không có thư mục top-level cho các việc thực hiện unit test. Thay vào đó, chúng tôi đặt chúng vào một thư mục có tên `__tests__` liên quan đến các tệp mà chúng kiểm tra. -For example, a test for [`setInnerHTML.js`](https://github.com/facebook/react/blob/87724bd87506325fcaf2648c70fc1f43411a87be/src/renderers/dom/client/utils/setInnerHTML.js) is located in [`__tests__/setInnerHTML-test.js`](https://github.com/facebook/react/blob/87724bd87506325fcaf2648c70fc1f43411a87be/src/renderers/dom/client/utils/__tests__/setInnerHTML-test.js) right next to it. +Ví dụ, một bài kiểm thử cho [`setInnerHTML.js`](https://github.com/facebook/react/blob/87724bd87506325fcaf2648c70fc1f43411a87be/src/renderers/dom/client/utils/setInnerHTML.js) được đặt trong [`__tests__/setInnerHTML-test.js`](https://github.com/facebook/react/blob/87724bd87506325fcaf2648c70fc1f43411a87be/src/renderers/dom/client/utils/__tests__/setInnerHTML-test.js) ngay bên cạnh nó ### Warnings and Invariants {#warnings-and-invariants} -The React codebase uses `console.error` to display warnings: +React codebase sử dụng `console.error` để hiển thị các cảnh báo: ```js if (__DEV__) { @@ -43,7 +43,7 @@ if (__DEV__) { } ``` -Warnings are only enabled in development. In production, they are completely stripped out. If you need to forbid some code path from executing, use `invariant` module instead: +Cảnh báo chỉ được kích hoạt trong quá trình phát triển. Trong sản phẩm, chúng hoàn toàn bị loại bỏ. Nếu bạn cần cấm một số đường dẫn mã thực thi, hãy sử dụng mô-đun `invariant` để thay thế: ```js var invariant = require('invariant'); @@ -54,19 +54,19 @@ invariant( ); ``` -**The invariant is thrown when the `invariant` condition is `false`.** +**Bất biến - Invariant được ném ra khi điều kiện `invariant` là `false`.** -"Invariant" is just a way of saying "this condition always holds true". You can think about it as making an assertion. +“Bất biến - Invariant” chỉ là một cách nói “điều kiện này luôn đúng”. Bạn có thể nghĩ về nó như một khẳng định. -It is important to keep development and production behavior similar, so `invariant` throws both in development and in production. The error messages are automatically replaced with error codes in production to avoid negatively affecting the byte size. +Điều quan trọng là phải giữ cho sự phát triển và hành vi sản phẩm tương tự nhau, vì vậy `invariant` cả trong quá trình phát triển và sản xuất. Các thông báo lỗi được tự động thay thế bằng mã lỗi trong quá trình sản xuất để tránh ảnh hưởng tiêu cực đến kích thước byte. ### Development and Production {#development-and-production} -You can use `__DEV__` pseudo-global variable in the codebase to guard development-only blocks of code. +Bạn có thể dùng `__DEV__` biến giả toàn cục trong codebase để bảo vệ các khối mã chỉ dành cho quá trình phát triển. -It is inlined during the compile step, and turns into `process.env.NODE_ENV !== 'production'` checks in the CommonJS builds. +Nó được nội tuyến trong bước biên dịch và chuyển thành kiểm tra `process.env.NODE_ENV !== 'production'` trong các bản CommonJS build. -For standalone builds, it becomes `true` in the unminified build, and gets completely stripped out with the `if` blocks it guards in the minified build. +Đối với các bản build độc lập, nó trở thành `true` trong các bản build không hợp nhất và hoàn toàn bị loại bỏ khỏi các khối `if` mà nó bảo vệ trong các bản build thu nhỏ. ```js if (__DEV__) { @@ -76,9 +76,9 @@ if (__DEV__) { ### Flow {#flow} -We recently started introducing [Flow](https://flow.org/) checks to the codebase. Files marked with the `@flow` annotation in the license header comment are being typechecked. +Gần đây, chúng tôi đã bắt đầu giới thiệu kiểm tra Luồng - [Flow](https://flow.org/) cho codebase. Các tệp được đánh dấu bằng chú thích `@flow` trong nhận xét tiêu đề giấy phép đang được kiểm tra. -We accept pull requests [adding Flow annotations to existing code](https://github.com/facebook/react/pull/7600/files). Flow annotations look like this: +Chúng tôi chấp nhận pull request [thêm các Flow annotation vào mã hiện có](https://github.com/facebook/react/pull/7600/files). Flow annotations sẽ như thế này: ```js ReactRef.detachRefs = function( @@ -89,75 +89,75 @@ ReactRef.detachRefs = function( } ``` -When possible, new code should use Flow annotations. -You can run `yarn flow` locally to check your code with Flow. +Khi có thể, mã mới nên sử dụng các chú thích Flow annotation. +Bạn có thể chạy `yarn flow` ở local để kiểm tra mã của bạn với Flow. ### Multiple Packages {#multiple-packages} -React is a [monorepo](https://danluu.com/monorepo/). Its repository contains multiple separate packages so that their changes can be coordinated together, and issues live in one place. +React là một [monorepo](https://danluu.com/monorepo/). Repository của nó chứa nhiều package riêng biệt để các thay đổi của chúng có thể được phối hợp với nhau và các issue được đặt tại một nơi. ### React Core {#react-core} -The "core" of React includes all the [top-level `React` APIs](/docs/react-api.html#react), for example: +"Core" của React bao gồm tất cả [top-level `React` APIs](/docs/react-api.html#react), ví dụ: * `React.createElement()` * `React.Component` * `React.Children` -**React core only includes the APIs necessary to define components.** It does not include the [reconciliation](/docs/reconciliation.html) algorithm or any platform-specific code. It is used both by React DOM and React Native components. +**React core chỉ bao gồm các API cần thiết để định nghĩa các component**. Nó không bao gồm thuật toán [reconciliation](/docs/reconciliation.html) hoặc bất kỳ mã nền tảng cụ thể nào. Nó được sử dụng bởi cả các component của React DOM và React Native. -The code for React core is located in [`packages/react`](https://github.com/facebook/react/tree/main/packages/react) in the source tree. It is available on npm as the [`react`](https://www.npmjs.com/package/react) package. The corresponding standalone browser build is called `react.js`, and it exports a global called `React`. +Mã cho React core được đặt tại [`packages/react`](https://github.com/facebook/react/tree/main/packages/react) trong source tree. Nó có sẵn trên npm dưới dạng [`react`](https://www.npmjs.com/package/react) package. Bản build trình duyệt độc lập tương ứng được gọi là `react.js` và nó xuất ra toàn cầu có tên là `React`. ### Renderers {#renderers} -React was originally created for the DOM but it was later adapted to also support native platforms with [React Native](https://reactnative.dev/). This introduced the concept of "renderers" to React internals. +React ban đầu được tạo cho DOM nhưng sau đó nó đã được điều chỉnh để cũng hỗ trợ các platform native với [React Native](https://reactnative.dev/). Điều này đã giới thiệu khái niệm “rederers - trình kết xuất” cho nội bộ React. -**Renderers manage how a React tree turns into the underlying platform calls.** +**Renderers quản lý cách React tree chuyển thành các lệnh gọi platform.** -Renderers are also located in [`packages/`](https://github.com/facebook/react/tree/main/packages/): +Renderers được đặt tại [`packages/`](https://github.com/facebook/react/tree/main/packages/): -* [React DOM Renderer](https://github.com/facebook/react/tree/main/packages/react-dom) renders React components to the DOM. It implements [top-level `ReactDOM` APIs](/docs/react-dom.html) and is available as [`react-dom`](https://www.npmjs.com/package/react-dom) npm package. It can also be used as standalone browser bundle called `react-dom.js` that exports a `ReactDOM` global. -* [React Native Renderer](https://github.com/facebook/react/tree/main/packages/react-native-renderer) renders React components to native views. It is used internally by React Native. -* [React Test Renderer](https://github.com/facebook/react/tree/main/packages/react-test-renderer) renders React components to JSON trees. It is used by the [Snapshot Testing](https://facebook.github.io/jest/blog/2016/07/27/jest-14.html) feature of [Jest](https://facebook.github.io/jest) and is available as [react-test-renderer](https://www.npmjs.com/package/react-test-renderer) npm package. +* [React DOM Renderer](https://github.com/facebook/react/tree/main/packages/react-dom) render React components với DOM. Nó triển khai [top-level `ReactDOM` APIs](/docs/react-dom.html) avà có sẵn dưới dạng [`react-dom`](https://www.npmjs.com/package/react-dom) npm package. Nó cũng có thể được sử dụng như một package trình duyệt độc lập gọi là `react-dom.js` để xuất ra toàn cục `ReactDOM`. +* [React Native Renderer](https://github.com/facebook/react/tree/main/packages/react-native-renderer) renders React components với native views. Nó được sử dụng trong nội bộ React Native. +* [React Test Renderer](https://github.com/facebook/react/tree/main/packages/react-test-renderer) renders React components với JSON trees. Nó được sử dụng bởi chức năng [Snapshot Testing](https://facebook.github.io/jest/blog/2016/07/27/jest-14.html) của [Jest](https://facebook.github.io/jest) và có sẵn dưới dạng[react-test-renderer](https://www.npmjs.com/package/react-test-renderer) npm package. -The only other officially supported renderer is [`react-art`](https://github.com/facebook/react/tree/main/packages/react-art). It used to be in a separate [GitHub repository](https://github.com/reactjs/react-art) but we moved it into the main source tree for now. +Trình kết xuất - renderer duy nhất được hỗ trợ chính thức là [`react-art`](https://github.com/facebook/react/tree/main/packages/react-art). Nó từng nằm trong [GitHub repository](https://github.com/reactjs/react-art) riêng biệt nhưng chúng tôi đã chuyển nó vào cây nguồn chính từ bây giờ. ->**Note:** +>**Lưu ý:** > ->Technically the [`react-native-renderer`](https://github.com/facebook/react/tree/main/packages/react-native-renderer) is a very thin layer that teaches React to interact with React Native implementation. The real platform-specific code managing the native views lives in the [React Native repository](https://github.com/facebook/react-native) together with its components. +>Về mặt kỹ thuật [`react-native-renderer`](https://github.com/facebook/react/tree/main/packages/react-native-renderer) là một layer rất nhỏ hướng dẫn React tương tác với việc triển khai React Native. Mã thực sự dành riêng cho platform quản lý các native view nằm trong [React Native repository](https://github.com/facebook/react-native) cùng với các component của nó. ### Reconcilers {#reconcilers} -Even vastly different renderers like React DOM and React Native need to share a lot of logic. In particular, the [reconciliation](/docs/reconciliation.html) algorithm should be as similar as possible so that declarative rendering, custom components, state, lifecycle methods, and refs work consistently across platforms. +Ngay cả những trình render rất khác nhau như React DOM và React Native cũng cần phải chia sẻ rất nhiều logic. Đặc biệt, thuật toán [đối chiếu - reconciliation](/docs/reconciliation.html) phải giống nhau nhất có thể để declarative rendering, tùy chỉnh components, state, các lifecycle method, và refs hoạt động nhất quán trên các nền tảng. -To solve this, different renderers share some code between them. We call this part of React a "reconciler". When an update such as `setState()` is scheduled, the reconciler calls `render()` on components in the tree and mounts, updates, or unmounts them. +Để giải quyết vấn đề này, các trình render khác nhau chia sẻ một số mã giữa chúng. Chúng tôi gọi phần này của React là “trình điều hòa - reconciler”. Khi thực hiện cập nhật như `setState()` được lên lịch, trình reconciler sẽ gọi `render()` trên các component trong tree và mount, update hoặc unmount chúng. -Reconcilers are not packaged separately because they currently have no public API. Instead, they are exclusively used by renderers such as React DOM and React Native. +Reconcilers không được đóng gói riêng biệt vì chúng hiện không có API công khai. Thay vào đó, chúng được sử dụng độc quyền bởi các trình kết xuất như React DOM và React Native. ### Stack Reconciler {#stack-reconciler} -The "stack" reconciler is the implementation powering React 15 and earlier. We have since stopped using it, but it is documented in detail in the [next section](/docs/implementation-notes.html). +Trình "stack" reconciler là trình triển khai cung cấp "năng lượng" cho React 15 trở về trước. Chúng tôi đã ngừng sử dụng nó, nhưng nó sẽ được ghi lại chi tiết trong [phần tiếp theo.](/docs/implementation-notes.html). ### Fiber Reconciler {#fiber-reconciler} -The "fiber" reconciler is a new effort aiming to resolve the problems inherent in the stack reconciler and fix a few long-standing issues. It has been the default reconciler since React 16. +Trình "fiber" reconciler là một nỗ lực mới nhằm giải quyết các vấn đề vốn có trong trình stack reconciler và khắc phục một số sự cố lâu đời. Nó đã là trình reconciler mặc định kể từ React 16. -Its main goals are: +Mục tiêu của nó là: -* Ability to split interruptible work in chunks. -* Ability to prioritize, rebase and reuse work in progress. -* Ability to yield back and forth between parents and children to support layout in React. -* Ability to return multiple elements from `render()`. -* Better support for error boundaries. +* Khả năng phân chia công việc bị gián đoạn thành nhiều phần. +* Khả năng sắp xếp thứ tự ưu tiên, rebase và tái sử dụng công việc đang thực hiện. +* Khả năng "nhường nhịn qua lại" giữa cha mẹ và con cái để hỗ trợ layout bố cục trong React. +* Khả năng trả về nhiều component từ `render()`. +* Hỗ trợ tốt hơn cho các error boundary. -You can read more about React Fiber Architecture [here](https://github.com/acdlite/react-fiber-architecture) and [here](https://blog.ag-grid.com/inside-fiber-an-in-depth-overview-of-the-new-reconciliation-algorithm-in-react). While it has shipped with React 16, the async features are not enabled by default yet. +Bạn có thể đọc thêm về React Fiber Architecture [tại đây](https://github.com/acdlite/react-fiber-architecture) và [tại đây](https://blog.ag-grid.com/inside-fiber-an-in-depth-overview-of-the-new-reconciliation-algorithm-in-react). Mặc dù nó đã được triển khai với React 16, nhưng các tính năng bất đồng bộ vẫn chưa được kích hoạt theo mặc định. -Its source code is located in [`packages/react-reconciler`](https://github.com/facebook/react/tree/main/packages/react-reconciler). +Mã nguồn của nó được đặt ở [`packages/react-reconciler`](https://github.com/facebook/react/tree/main/packages/react-reconciler). ### Event System {#event-system} -React implements a layer over native events to smooth out cross-browser differences. Its source code is located in [`packages/react-dom/src/events`](https://github.com/facebook/react/tree/main/packages/react-dom/src/events). +React triển khai một layer trên các sự kiện native để giải quyết sự khác biệt giữa các trình duyệt. Mã nguồn được đặt tại [`packages/react-dom/src/events`](https://github.com/facebook/react/tree/main/packages/react-dom/src/events). ### What Next? {#what-next} -Read the [next section](/docs/implementation-notes.html) to learn about the pre-React 16 implementation of reconciler in more detail. We haven't documented the internals of the new reconciler yet. +Đọc [phần tiếp theo](/docs/implementation-notes.html) để tìm hiểu chi tiết hơn về việc triển khai trình reconciler trước React 16. Chúng tôi chưa ghi lại nội dung bên trong của trình reconciler mới.