From fef3928e139c44b4c9a8475f5286d37ce5d78953 Mon Sep 17 00:00:00 2001 From: Truong Viet Trung Date: Tue, 9 May 2023 00:28:56 +0700 Subject: [PATCH 1/4] Translation: useDebugValue --- src/content/reference/react/useDebugValue.md | 40 ++++++++++---------- 1 file changed, 20 insertions(+), 20 deletions(-) diff --git a/src/content/reference/react/useDebugValue.md b/src/content/reference/react/useDebugValue.md index 8826665e7..a0edf308b 100644 --- a/src/content/reference/react/useDebugValue.md +++ b/src/content/reference/react/useDebugValue.md @@ -4,7 +4,7 @@ title: useDebugValue -`useDebugValue` is a React Hook that lets you add a label to a custom Hook in [React DevTools.](/learn/react-developer-tools) +`useDebugValue` là một React Hook để giúp thêm nhãn (label) vào một custom Hook trên [Công cụ phát triển React (React DevTools).](/learn/react-developer-tools) ```js useDebugValue(value, format?) @@ -16,11 +16,11 @@ useDebugValue(value, format?) --- -## Reference {/*reference*/} +## Tham khảo {/*reference*/} ### `useDebugValue(value, format?)` {/*usedebugvalue*/} -Call `useDebugValue` at the top level of your [custom Hook](/learn/reusing-logic-with-custom-hooks) to display a readable debug value: +Gọi `useDebugValue` ở cấp cao nhất trong [custom Hook](/learn/reusing-logic-with-custom-hooks) của bạn để hiển thị một giá trị debug (debug value) dễ đọc: ```js import { useDebugValue } from 'react'; @@ -32,22 +32,22 @@ function useOnlineStatus() { } ``` -[See more examples below.](#usage) +[Xem thêm các ví dụ phía dưới.](#usage) -#### Parameters {/*parameters*/} +#### Các tham số (Parameters) {/*parameters*/} -* `value`: The value you want to display in React DevTools. It can have any type. -* **optional** `format`: A formatting function. When the component is inspected, React DevTools will call the formatting function with the `value` as the argument, and then display the returned formatted value (which may have any type). If you don't specify the formatting function, the original `value` itself will be displayed. +* `value`: Giá trị bạn muốn hiển thị trên React DevTools. Giá trị này có thể thuộc bất cứ kiểu nào. +* **không bắt buộc** `format`: Là một hàm dùng để định dạng. Khi bạn kiểm tra các thành phần (component), React DevTools sẽ gọi hàm này với đối số là giá trị của `value`, sau đó sẽ hiển thị giá trị sau khi định dạng (giá trị sau khi định dạng cũng có thể thuộc bất cứ kiểu nào). Nếu bạn không thiết lập hàm định dạng, giá trị ban đầu của `value` sẽ được hiển thị. -#### Returns {/*returns*/} +#### Giá trị trả về (Returns) {/*returns*/} -`useDebugValue` does not return anything. +`useDebugValue` không trả về bất cứ giá trị nào. -## Usage {/*usage*/} +## Cách sử dụng {/*usage*/} -### Adding a label to a custom Hook {/*adding-a-label-to-a-custom-hook*/} +### Thêm label cho custom Hook {/*adding-a-label-to-a-custom-hook*/} -Call `useDebugValue` at the top level of your [custom Hook](/learn/reusing-logic-with-custom-hooks) to display a readable debug value for [React DevTools.](/learn/react-developer-tools) +Gọi `useDebugValue` ở cấp cao nhất cho [custom Hook](/learn/reusing-logic-with-custom-hooks) của bạn để hiển thị một debug value dễ đọc trên [React DevTools.](/learn/react-developer-tools) ```js [[1, 5, "isOnline ? 'Online' : 'Offline'"]] import { useDebugValue } from 'react'; @@ -59,11 +59,11 @@ function useOnlineStatus() { } ``` -This gives components calling `useOnlineStatus` a label like `OnlineStatus: "Online"` when you inspect them: +Việc này sẽ gắn thêm label như là `OnlineStatus: "Online"` cho các component gọi `useOnlineStatus` khi bạn kiểm tra chúng: -![A screenshot of React DevTools showing the debug value](/images/docs/react-devtools-usedebugvalue.png) +![Một ảnh chụp của React DevTools khi hiển thị debug value](/images/docs/react-devtools-usedebugvalue.png) -Without the `useDebugValue` call, only the underlying data (in this example, `true`) would be displayed. +Nếu không gọi `useDebugValue`, sẽ chỉ có dữ liệu cơ bản (như ví dụ này là `true`) được hiển thị. @@ -103,20 +103,20 @@ function subscribe(callback) { -Don't add debug values to every custom Hook. It's most valuable for custom Hooks that are part of shared libraries and that have a complex internal data structure that's difficult to inspect. +Đừng lạm dụng debug value cho tất cả các custom Hook. Nó có giá trị nhất khi sử dụng cho những custom Hook là một phần của các thư viện dùng chung và có cấu trúc dữ liệu nội bội phức tạp gây khó khăn cho việc kiểm tra. --- -### Deferring formatting of a debug value {/*deferring-formatting-of-a-debug-value*/} +### Trì hoãn việc định dạng một debug value {/*deferring-formatting-of-a-debug-value*/} -You can also pass a formatting function as the second argument to `useDebugValue`: +Bạn có thể đưa vào một hàm định dạng làm đối số thứ hai cho `useDebugValue`: ```js [[1, 1, "date", 18], [2, 1, "date.toDateString()"]] useDebugValue(date, date => date.toDateString()); ``` -Your formatting function will receive the debug value as a parameter and should return a formatted display value. When your component is inspected, React DevTools will call this function and display its result. +Hàm định dạng của bạn sẽ nhận được tham số là debug value và cần trả về một giá trị đã định dạng để hiển thị (formatted display value). Chỉ khi nào component của bạn được kiểm tra, React DevTools sẽ gọi hàm này và hiển thị kết quả được trả về. -This lets you avoid running potentially expensive formatting logic unless the component is actually inspected. For example, if `date` is a Date value, this avoids calling `toDateString()` on it for every render. +Điều này giúp bạn tránh việc luôn chạy những logic định dạng (đôi khi những logic này có thể sẽ rất tốn kém), trừ phi là lúc component đó đang được kiểm tra. Ví dụ như, `date` là một giá trị kiểu Date, việc sử dụng `useDebugValue` giúp tránh gọi đến `toDateString()` trên giá trị đó cho mỗi lần render. From 31b9eafca8cd8d8b1afb663bc22903c07aabf182 Mon Sep 17 00:00:00 2001 From: Truong Viet Trung Date: Tue, 9 May 2023 00:31:29 +0700 Subject: [PATCH 2/4] update translation --- src/content/reference/react/useDebugValue.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/reference/react/useDebugValue.md b/src/content/reference/react/useDebugValue.md index a0edf308b..648d1420a 100644 --- a/src/content/reference/react/useDebugValue.md +++ b/src/content/reference/react/useDebugValue.md @@ -4,7 +4,7 @@ title: useDebugValue -`useDebugValue` là một React Hook để giúp thêm nhãn (label) vào một custom Hook trên [Công cụ phát triển React (React DevTools).](/learn/react-developer-tools) +`useDebugValue` là một React Hook để giúp thêm nhãn (label) vào một custom Hook khi hiển thị trên [Công cụ phát triển React (React DevTools).](/learn/react-developer-tools) ```js useDebugValue(value, format?) From 3d5985319a054c0f45d4df4b3ad98c58e1765789 Mon Sep 17 00:00:00 2001 From: Truong Viet Trung Date: Tue, 9 May 2023 00:34:03 +0700 Subject: [PATCH 3/4] update translation --- src/content/reference/react/useDebugValue.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/reference/react/useDebugValue.md b/src/content/reference/react/useDebugValue.md index 648d1420a..f64eb7a13 100644 --- a/src/content/reference/react/useDebugValue.md +++ b/src/content/reference/react/useDebugValue.md @@ -47,7 +47,7 @@ function useOnlineStatus() { ### Thêm label cho custom Hook {/*adding-a-label-to-a-custom-hook*/} -Gọi `useDebugValue` ở cấp cao nhất cho [custom Hook](/learn/reusing-logic-with-custom-hooks) của bạn để hiển thị một debug value dễ đọc trên [React DevTools.](/learn/react-developer-tools) +Gọi `useDebugValue` ở cấp cao nhất trong [custom Hook](/learn/reusing-logic-with-custom-hooks) của bạn để hiển thị một debug value dễ đọc trên [React DevTools.](/learn/react-developer-tools) ```js [[1, 5, "isOnline ? 'Online' : 'Offline'"]] import { useDebugValue } from 'react'; From 8d1deb893ac236b6c358e36e4fca0e18938e7edb Mon Sep 17 00:00:00 2001 From: Truong Viet Trung Date: Tue, 9 May 2023 00:36:55 +0700 Subject: [PATCH 4/4] update translation --- src/content/reference/react/useDebugValue.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/reference/react/useDebugValue.md b/src/content/reference/react/useDebugValue.md index f64eb7a13..62e24c609 100644 --- a/src/content/reference/react/useDebugValue.md +++ b/src/content/reference/react/useDebugValue.md @@ -37,7 +37,7 @@ function useOnlineStatus() { #### Các tham số (Parameters) {/*parameters*/} * `value`: Giá trị bạn muốn hiển thị trên React DevTools. Giá trị này có thể thuộc bất cứ kiểu nào. -* **không bắt buộc** `format`: Là một hàm dùng để định dạng. Khi bạn kiểm tra các thành phần (component), React DevTools sẽ gọi hàm này với đối số là giá trị của `value`, sau đó sẽ hiển thị giá trị sau khi định dạng (giá trị sau khi định dạng cũng có thể thuộc bất cứ kiểu nào). Nếu bạn không thiết lập hàm định dạng, giá trị ban đầu của `value` sẽ được hiển thị. +* `format` (**không bắt buộc**): Là một hàm dùng để định dạng. Khi bạn kiểm tra các thành phần (component), React DevTools sẽ gọi hàm này với đối số là giá trị của `value`, sau đó sẽ hiển thị giá trị sau khi định dạng (giá trị sau khi định dạng cũng có thể thuộc bất cứ kiểu nào). Nếu bạn không thiết lập hàm định dạng, giá trị ban đầu của `value` sẽ được hiển thị. #### Giá trị trả về (Returns) {/*returns*/}