From 94ce1c16852325b3f602e7f41ceaf0a93ef27daf Mon Sep 17 00:00:00 2001 From: Duc Le Date: Sat, 29 Apr 2023 00:13:46 +0700 Subject: [PATCH 1/2] Translation: Profiler --- src/content/reference/react/Profiler.md | 51 ++++++++++++------------- 1 file changed, 25 insertions(+), 26 deletions(-) diff --git a/src/content/reference/react/Profiler.md b/src/content/reference/react/Profiler.md index 5bfa3b317..9b9dba897 100644 --- a/src/content/reference/react/Profiler.md +++ b/src/content/reference/react/Profiler.md @@ -4,7 +4,7 @@ title: -`` lets you measure rendering performance of a React tree programmatically. +`` cho phép bạn đo lường hiệu suất render của một React tree bằng cách lập trình ```js @@ -18,11 +18,11 @@ title: --- -## Reference {/*reference*/} +## Tham khảo {/*reference*/} ### `` {/*profiler*/} -Wrap a component tree in a `` to measure its rendering performance. +Bọc một component tree trong `` để đo lường hiệu suất. ```js @@ -32,18 +32,18 @@ Wrap a component tree in a `` to measure its rendering performance. #### Props {/*props*/} -* `id`: A string identifying the part of the UI you are measuring. -* `onRender`: An [`onRender` callback](#onrender-callback) that React calls it every time components within the profiled tree update. It receives information about what was rendered and how much time it took. +* `id`: Một chuỗi ký tự để xác định phần giao diện bạn muốn đo lường. +* `onRender`: Một [callback `onRender`](#onrender-callback) mà React gọi mỗi khi các thành phần bên trong tree cập nhật. Nó nhận thông tin về những gì được render và mất bao nhiêu thời gian để render. -#### Caveats {/*caveats*/} +#### Những điều cần chú ý {/*caveats*/} -* Profiling adds some additional overhead, so **it is disabled in the production build by default.** To opt into production profiling, you need to enable a [special production build with profiling enabled.](https://fb.me/react-profiling) +* Việc đo lường sẽ làm giảm hiệu suất, vì vậy **mặc định nó sẽ luôn được vô hiệu hoá trong bản build production.** Để đo lường ở production, bạn cần kích hoạt [tính năng đo lường trong một bản build production đặc biệt.](https://fb.me/react-profiling) --- ### `onRender` callback {/*onrender-callback*/} -React will call your `onRender` callback with information about what was rendered. +React sẽ gọi call `onRender` callback với thông tin về những gì được render. ```js function onRender(id, phase, actualDuration, baseDuration, startTime, commitTime) { @@ -51,22 +51,22 @@ function onRender(id, phase, actualDuration, baseDuration, startTime, commitTime } ``` -#### Parameters {/*onrender-parameters*/} +#### Các tham số {/*onrender-parameters*/} -* `id`: The string `id` prop of the `` tree that has just committed. This lets you identify which part of the tree was committed if you are using multiple profilers. -* `phase`: `"mount"`, `"update"` or `"nested-update"`. This lets you know whether the tree has just been mounted for the first time or re-rendered due to a change in props, state, or hooks. -* `actualDuration`: The number of milliseconds spent rendering the `` and its descendants for the current update. This indicates how well the subtree makes use of memoization (e.g. [`memo`](/reference/react/memo) and [`useMemo`](/reference/react/useMemo)). Ideally this value should decrease significantly after the initial mount as many of the descendants will only need to re-render if their specific props change. -* `baseDuration`: The number of milliseconds estimating how much time it would take to re-render the entire `` subtree without any optimizations. It is calculated by summing up the most recent render durations of each component in the tree. This value estimates a worst-case cost of rendering (e.g. the initial mount or a tree with no memoization). Compare `actualDuration` against it to see if memoization is working. -* `startTime`: A numeric timestamp for when React began rendering the current update. -* `endTime`: A numeric timestamp for when React committed the current update. This value is shared between all profilers in a commit, enabling them to be grouped if desirable. +* `id`: Chuỗi `id` là prop của `` tree được thực thi. Điều này cho phép bạn xác định phần nào của tree đã được thực thi nếu bạn đang sử dụng nhiều trình đo hiệu năng. +* `phase`: `"mount"`, `"update"` hoặc `"nested-update"`. Chúng giúp bạn biết liệu tree đã được render lần đầu tiên hay đã được vẽ lại do thay đổi trong props, state hoặc hooks. +* `actualDuration`: Số mili giây dành cho việc render `` và các phần tử con phục vụ cho cập nhật hiện tại. Nó giúp cho thấy subtree tận dụng tốt việc ghi nhớ (memorization) (ví dụ như [`memo`](/reference/react/memo) và [`useMemo`](/reference/react/useMemo)). Lý tưởng nhất là giá trị này sẽ giảm đáng kể sau lần render ban đầu vì nhiều thành phần con chỉ cần được render lại nếu props cụ thể của chúng thay đổi. +* `baseDuration`: Số mili giây ước tính cho thời gian cần để render lại toàn bộ subtree của `` mà không cần sự tối ưu hoá nào. Giá trị này được tính bằng cách tính tổng thời gian render gần đây nhất của các thành phần trong tree. Giá trị này sẽ giúp ước tính được thời gian chậm nhất (ví dụ lần render ban đầu hay một tree mà không có sự ghi nhớ nào). Hãy so sánh `actualDuration` với nó để xem việc ghi nhớ có hoạt động chính xác hay không. +* `startTime`: Mốc thời gian mà React bắt đầu thực hiện việc render cho cập nhật hiện tại. +* `endTime`: Mốc thời gian React thực hiện xong cập nhật hiện tại. Giá trị này được chia sẻ giữa tất cả các profiler trong một lần thực thi, cho phép nhóm chúng lại nếu cần thiết. --- -## Usage {/*usage*/} +## Cách sử dụng {/*usage*/} -### Measuring rendering performance programmatically {/*measuring-rendering-performance-programmatically*/} +### Đo hiệu suất render bằng cách lập trình {/*measuring-rendering-performance-programmatically*/} -Wrap the `` component around a React tree to measure its rendering performance. +Bọc `` vào một React tree để đo lường hiệu suất render. ```js {2,4} @@ -77,25 +77,25 @@ Wrap the `` component around a React tree to measure its rendering per ``` -It requires two props: an `id` (string) and an `onRender` callback (function) which React calls any time a component within the tree "commits" an update. +Nó yêu cầu 2 props: một chuỗi `id` và một `onRender` mà React gọi bất cứ khi nào một component trong tree cập nhật. -Profiling adds some additional overhead, so **it is disabled in the production build by default.** To opt into production profiling, you need to enable a [special production build with profiling enabled.](https://fb.me/react-profiling) +Việc đo lường sẽ làm giảm hiệu suất, vì vậy **mặc định nó sẽ luôn được vô hiệu hoá trong bản build production.** Để đo lường ở production, bạn cần kích hoạt [tính năng đo lường trong một bản build production đặc biệt.](https://fb.me/react-profiling) -`` lets you gather measurements programmatically. If you're looking for an interactive profiler, try the Profiler tab in [React Developer Tools](/learn/react-developer-tools). It exposes similar functionality as a browser extension. +`` giúp bạn đo lường hiệu suất bằng cách lập trình thủ công. Nếu bạn muốn tìm một phương pháp đo lường có thể tương tác tốt hơn, hãy thử tab Profiler ở trong [công cụ phát triển React](/learn/react-developer-tools). Nó là một tiện ích trình duyệt với các tính năng tương tự. --- -### Measuring different parts of the application {/*measuring-different-parts-of-the-application*/} +### Đo lường các phần khác nhau của ứng dụng {/*measuring-different-parts-of-the-application*/} -You can use multiple `` components to measure different parts of your application: +Bạn có thể sử dụng nhiều `` để đo lường nhiều phần khác nhau của ứng dụng: ```js {5,7} @@ -108,7 +108,7 @@ You can use multiple `` components to measure different parts of your ``` -You can also nest `` components: +Bạn cũng có thể lồng nhiều `` vào với nhau: ```js {5,7,9,12} @@ -126,7 +126,6 @@ You can also nest `` components: ``` -Although `` is a lightweight component, it should be used only when necessary. Each use adds some CPU and memory overhead to an application. +Mặc dù `` là một component rất nhẹ, nó chỉ nên được dùng khi cần thiết. Mỗi lần sử dụng sẽ đều tiêu hao CPU và bộ nhớ thêm cho ứng dụng. --- - From 488eb592198a1668aa3a364d5cc2c346376f2439 Mon Sep 17 00:00:00 2001 From: Duc Le Date: Sun, 30 Apr 2023 17:03:31 +0700 Subject: [PATCH 2/2] tweaks naturally --- src/content/reference/react/Profiler.md | 22 +++++++++++----------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/src/content/reference/react/Profiler.md b/src/content/reference/react/Profiler.md index 9b9dba897..77f894a00 100644 --- a/src/content/reference/react/Profiler.md +++ b/src/content/reference/react/Profiler.md @@ -22,7 +22,7 @@ title: ### `` {/*profiler*/} -Bọc một component tree trong `` để đo lường hiệu suất. +Hãy bọc các component bên trong `` để đo lường hiệu suất. ```js @@ -32,8 +32,8 @@ Bọc một component tree trong `` để đo lường hiệu suất. #### Props {/*props*/} -* `id`: Một chuỗi ký tự để xác định phần giao diện bạn muốn đo lường. -* `onRender`: Một [callback `onRender`](#onrender-callback) mà React gọi mỗi khi các thành phần bên trong tree cập nhật. Nó nhận thông tin về những gì được render và mất bao nhiêu thời gian để render. +* `id`: Một chuỗi ký tự để xác định phần giao diện mà bạn muốn đo lường hiệu suất. +* `onRender`: Một [callback `onRender`](#onrender-callback) mà React sẽ gọi mỗi khi các component bên trong tree cập nhật. Nó sẽ nhận lại thông tin về những gì đã được render và mất bao nhiêu thời gian để render chúng. #### Những điều cần chú ý {/*caveats*/} @@ -43,7 +43,7 @@ Bọc một component tree trong `` để đo lường hiệu suất. ### `onRender` callback {/*onrender-callback*/} -React sẽ gọi call `onRender` callback với thông tin về những gì được render. +React sẽ gọi callback `onRender` với thông tin về những gì được render. ```js function onRender(id, phase, actualDuration, baseDuration, startTime, commitTime) { @@ -53,10 +53,10 @@ function onRender(id, phase, actualDuration, baseDuration, startTime, commitTime #### Các tham số {/*onrender-parameters*/} -* `id`: Chuỗi `id` là prop của `` tree được thực thi. Điều này cho phép bạn xác định phần nào của tree đã được thực thi nếu bạn đang sử dụng nhiều trình đo hiệu năng. -* `phase`: `"mount"`, `"update"` hoặc `"nested-update"`. Chúng giúp bạn biết liệu tree đã được render lần đầu tiên hay đã được vẽ lại do thay đổi trong props, state hoặc hooks. -* `actualDuration`: Số mili giây dành cho việc render `` và các phần tử con phục vụ cho cập nhật hiện tại. Nó giúp cho thấy subtree tận dụng tốt việc ghi nhớ (memorization) (ví dụ như [`memo`](/reference/react/memo) và [`useMemo`](/reference/react/useMemo)). Lý tưởng nhất là giá trị này sẽ giảm đáng kể sau lần render ban đầu vì nhiều thành phần con chỉ cần được render lại nếu props cụ thể của chúng thay đổi. -* `baseDuration`: Số mili giây ước tính cho thời gian cần để render lại toàn bộ subtree của `` mà không cần sự tối ưu hoá nào. Giá trị này được tính bằng cách tính tổng thời gian render gần đây nhất của các thành phần trong tree. Giá trị này sẽ giúp ước tính được thời gian chậm nhất (ví dụ lần render ban đầu hay một tree mà không có sự ghi nhớ nào). Hãy so sánh `actualDuration` với nó để xem việc ghi nhớ có hoạt động chính xác hay không. +* `id`: Chuỗi `id` là prop của `` tree được thực thi (commit). Điều này cho phép bạn xác định phần nào của tree đã được thực thi nếu bạn đang sử dụng nhiều trình đo hiệu năng. +* `phase`: `"mount"`, `"update"` hoặc `"nested-update"`. Chúng giúp bạn biết liệu tree đã được render lần đầu tiên hay đã được render lại do thay đổi trong props, state hoặc hooks. +* `actualDuration`: Số mili giây dành cho việc render `` và các phần tử con phục vụ cho cập nhật hiện tại. Nó giúp cho thấy subtree tận dụng tốt việc ghi nhớ (memorization) (ví dụ như [`memo`](/reference/react/memo) và [`useMemo`](/reference/react/useMemo)). Lý tưởng nhất là giá trị này sẽ giảm đáng kể sau lần render ban đầu vì nhiều component con chỉ cần được render lại nếu props cụ thể của chúng thay đổi. +* `baseDuration`: Số mili giây ước tính thời gian cần để render lại toàn bộ subtree của `` mà không cần tối ưu. Giá trị này được tính bằng cách tính tổng thời gian render gần đây nhất của các component trong tree. Nó sẽ giúp ước tính được thời gian chậm nhất (ví dụ lần render ban đầu hay một tree mà không có sự ghi nhớ nào). Hãy so sánh `actualDuration` với nó để xem việc ghi nhớ có hoạt động chính xác hay không. * `startTime`: Mốc thời gian mà React bắt đầu thực hiện việc render cho cập nhật hiện tại. * `endTime`: Mốc thời gian React thực hiện xong cập nhật hiện tại. Giá trị này được chia sẻ giữa tất cả các profiler trong một lần thực thi, cho phép nhóm chúng lại nếu cần thiết. @@ -77,7 +77,7 @@ Bọc `` vào một React tree để đo lường hiệu suất render ``` -Nó yêu cầu 2 props: một chuỗi `id` và một `onRender` mà React gọi bất cứ khi nào một component trong tree cập nhật. +Nó yêu cầu 2 props: một chuỗi `id` và một callback `onRender` mà React gọi bất cứ khi nào một component trong tree cập nhật. @@ -93,7 +93,7 @@ Việc đo lường sẽ làm giảm hiệu suất, vì vậy **mặc định n --- -### Đo lường các phần khác nhau của ứng dụng {/*measuring-different-parts-of-the-application*/} +### Đo hiệu suất các phần khác nhau của ứng dụng {/*measuring-different-parts-of-the-application*/} Bạn có thể sử dụng nhiều `` để đo lường nhiều phần khác nhau của ứng dụng: @@ -126,6 +126,6 @@ Bạn cũng có thể lồng nhiều `` vào với nhau: ``` -Mặc dù `` là một component rất nhẹ, nó chỉ nên được dùng khi cần thiết. Mỗi lần sử dụng sẽ đều tiêu hao CPU và bộ nhớ thêm cho ứng dụng. +Mặc dù `` là một component rất nhẹ, nó chỉ nên được dùng khi cần thiết. Mỗi lần sử dụng sẽ đều tiêu hao CPU và tốn thêm bộ nhớ cho ứng dụng. ---