You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
The `Profiler`measures how often a React application renders and what the "cost" of rendering is.
10
-
Its purpose is to help identify parts of an application that are slow and may benefit from [optimizations such as memoization](/docs/hooks-faq.html#how-to-memoize-calculations).
9
+
Công cụ `Profiler`(tạm gọi là `Công cụ Phân tích`) đánh giá xem ứng dụng React thực hiện việc render và "chi phí" để thực hiện nó.
10
+
Mục đích của nó là để xác định xem phần nào của ứng dụng chạy chậm và có thể được hưởng lợi từ việc [tối ưu hóa như là ghi nhớ (memoization)](/docs/hooks-faq.html#how-to-memoize-calculations).
11
11
12
-
> Note:
12
+
> Ghi chú:
13
13
>
14
-
> Profiling adds some additional overhead, so **it is disabled in [the production build](/docs/optimizing-performance.html#use-the-production-build)**.
14
+
> Việc Phân tích sẽ tốn thêm tài nguyên, vì vậy **nó sẽ bị vô hiệu hóa trên [môi trường Production](/docs/optimizing-performance.html#use-the-production-build)**.
15
15
>
16
-
> To opt into production profiling, React provides a special production build with profiling enabled.
17
-
> Read more about how to use this build at[fb.me/react-profiling](https://fb.me/react-profiling)
16
+
> Nếu bạn muốn sử dụng nó trên môi trường Production, React có thể cung cấp một bản build đặc biệt đã bật chức năng này cho môi trường Production.
17
+
> Đọc thêm về cách sử dụng bản build đáy tại[fb.me/react-profiling](https://fb.me/react-profiling)
18
18
19
-
## Usage {#usage}
19
+
## Sử dụng {#usage}
20
20
21
-
A `Profiler` can be added anywhere in a React tree to measure the cost of rendering that part of the tree.
22
-
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.
21
+
`Công cụ Phân tích (Profiler)` có thể thêm vào bất kì đâu trong React tree để tính toán việc render ở nơi mà `Profiler` component được thêm vào.
22
+
Nó cần 2 props: một là `id` (string) và một là `onRender`(hàm callback) để React có thể gọi bất kỳ lúc nào khi component ở bên trong cây (tree) có sự thay đổi.
23
23
24
-
For example, to profile a `Navigation`component and its descendants:
24
+
Ví dụ, để phân tích component `Navigation`và các component con (descendants) của nó:
25
25
26
26
```js{3}
27
27
render(
@@ -34,7 +34,7 @@ render(
34
34
);
35
35
```
36
36
37
-
Multiple `Profiler`components can be used to measure different parts of an application:
37
+
Có thể sử dụng nhiều `Profiler`component để đánh giá nhiều nơi khác nhau trong ứng dụng:
38
38
```js{3,6}
39
39
render(
40
40
<App>
@@ -48,7 +48,7 @@ render(
48
48
);
49
49
```
50
50
51
-
`Profiler`components can also be nested to measure different components within the same subtree:
51
+
`Profiler`component có thể sử dụng lồng nhau để phân tích các component khác nhau trong cùng một subtree:
52
52
```js{3,5,8}
53
53
render(
54
54
<App>
@@ -66,54 +66,54 @@ render(
66
66
);
67
67
```
68
68
69
-
> Note
69
+
> Ghi chú
70
70
>
71
-
> Although `Profiler`is a light-weight component, it should be used only when necessary; each use adds some CPU and memory overhead to an application.
71
+
> Mặc dù `Profiler`là một component nhẹ, nhưng bạn chỉ nên sử dụng khi cần thiết; mỗi lần sử dụng sẽ tốn thêm tài nguyên CPU và bộ nhớ RAM cho ứng dụng của bạn
72
72
73
73
## `onRender` Callback {#onrender-callback}
74
74
75
-
The `Profiler`requires an `onRender`function as a prop.
76
-
React calls this function any time a component within the profiled tree "commits" an update.
77
-
It receives parameters describing what was rendered and how long it took.
75
+
`Profiler`cần một hàm `onRender`giống như prop.
76
+
React sẽ gọi hàm này mỗi khi component được bọc bởi `Profiler` thực hiện một thay đổi.
77
+
Nó nhận thông tin mô tả những gì đã render và thời gian thực hiện.
78
78
79
79
```js
80
80
functiononRenderCallback(
81
-
id, //the "id" prop of the Profiler tree that has just committed
82
-
phase, //either "mount" (if the tree just mounted) or "update" (if it re-rendered)
83
-
actualDuration, //time spent rendering the committed update
84
-
baseDuration, //estimated time to render the entire subtree without memoization
85
-
startTime, //when React began rendering this update
86
-
commitTime, //when React committed this update
87
-
interactions//the Set of interactions belonging to this update
81
+
id, // "id" của Profiler tree vừa thực hiện thay đổi
82
+
phase, //một trong hai "mount" (nếu tree vừa được mounted) hoặc "update" (nếu nó re-rendered)
83
+
actualDuration, //thời gian để rendering cập nhật mới
84
+
baseDuration, // thời gian ước tính để hiển thị toàn bộ subtree mà không cần ghi nhớ
85
+
startTime, //khi React bắt đầu hiển thị bản cập nhật này
86
+
commitTime, //khi React hoàn thành cập nhật
87
+
interactions//tập hợp các tương tác thuộc về bản cập nhật
88
88
) {
89
-
//Aggregate or log render timings...
89
+
//Tổng hợp hoặc log thời gian render...
90
90
}
91
91
```
92
92
93
-
Let's take a closer look at each of the props:
93
+
Xem kỹ hơn từng prop:
94
94
95
95
***`id: string`** -
96
-
The `id` prop of the `Profiler` tree that has just committed.
97
-
This can be used to identify which part of the tree was committed if you are using multiple profilers.
96
+
"id" của Profiler tree vừa thực hiện thay đổi
97
+
Nó có thể dùng để xem thành phần nào của tree đã thay đổi nếu bạn sử dụng nhiều công cụ Phân tích (profilers).
98
98
***`phase: "mount" | "update"`** -
99
-
Identifies whether the tree has just been mounted for the first time or re-rendered due to a change in props, state, or hooks.
99
+
Xác định xem tree được mounted lần đầu tiên hay do re-rendered vì props, state hay hooks.
100
100
***`actualDuration: number`** -
101
-
Time spent rendering the `Profiler`and its descendants for the current update.
102
-
This indicates how well the subtree makes use of memoization (e.g.[`React.memo`](/docs/react-api.html#reactmemo), [`useMemo`](/docs/hooks-reference.html#usememo), [`shouldComponentUpdate`](/docs/hooks-faq.html#how-do-i-implement-shouldcomponentupdate)).
103
-
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.
101
+
Thời gian bỏ ra để rendering `Profiler`và các components con của nó.
102
+
Điều này cho biết bạn có nên sử dụng các công cụ memoization cho subtree hay không (ví dụ[`React.memo`](/docs/react-api.html#reactmemo), [`useMemo`](/docs/hooks-reference.html#usememo), [`shouldComponentUpdate`](/docs/hooks-faq.html#how-do-i-implement-shouldcomponentupdate)).
103
+
Lý tưởng nhất là giá trị này nên giảm đáng kể sau lần mount đầu tiên vì nhiều component con chỉ cần re-render nếu prop cụ thể nào đó của nó thay đổi.
104
104
***`baseDuration: number`** -
105
-
Duration of the most recent `render`time for each individual component within the `Profiler` tree.
106
-
This value estimates a worst-case cost of rendering (e.g. the initial mount or a tree with no memoization).
105
+
Khoảng thời gian `render`gần nhất cho từng component bên trong `Công cụ Phân tích (Profiler)`.
106
+
Giá trị này ước tính chi phí lãng phí cho trường hợp tệ nhất khi rendering (ví dụ: lần mount đầu tiên hoặc một tree không sử dụng memoization)
107
107
***`startTime: number`** -
108
-
Timestamp when React began rendering the current update.
108
+
Thời gian chính xác khi React bắt đầu rendering sự thay đổi.
109
109
***`commitTime: number`** -
110
-
Timestamp when React committed the current update.
111
-
This value is shared between all profilers in a commit, enabling them to be grouped if desirable.
110
+
Thời gian chính xác khi React hoàn thành rendering sự thay đổi.
111
+
Giá trì này được chia sẻ giữa các Công cụ Phân tích trong một commit, cho phép chúng được nhóm lại nếu muốn.
112
112
***`interactions: Set`** -
113
-
Set of ["interactions"](https://fb.me/react-interaction-tracing)that were being traced when the update was scheduled (e.g. when `render`or`setState`were called).
113
+
Tập hợp các ["tương tác"](https://fb.me/react-interaction-tracing)đã được theo dõi khi cập nhật hoặc lên lịch (ví dụ: khi `render`hoặc`setState`được gọi).
114
114
115
-
> Note
115
+
> Ghi chú
116
116
>
117
-
> Interactions can be used to identify the cause of an update, although the API for tracing them is still experimental.
117
+
> Các tương tác có thể được sử dụng để xác định nguồn của một cập nhật, mặc dù API để theo dõi chúng vẫn còn đang thử nghiệm.
118
118
>
119
-
> Learn more about it at[fb.me/react-interaction-tracing](https://fb.me/react-interaction-tracing)
0 commit comments