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
Call`useDebugValue`at the top level of your [custom Hook](/learn/reusing-logic-with-custom-hooks) to display a readable debug value:
23
+
Вызовите`useDebugValue`на верхнем уровне [пользовательского хука](/learn/reusing-logic-with-custom-hooks), чтобы отобразить читаемое отладочное значение:
24
24
25
25
```js
26
26
import { useDebugValue } from'react';
@@ -32,22 +32,22 @@ function useOnlineStatus() {
32
32
}
33
33
```
34
34
35
-
[See more examples below.](#usage)
35
+
[Больше примеров ниже.](#usage)
36
36
37
-
#### Parameters {/*parameters*/}
37
+
#### Параметры {/*parameters*/}
38
38
39
-
* `value`: The value you want to display in React DevTools. It can have any type.
40
-
* **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.
39
+
* `value`: Значение, которое вы хотите отобразить в React DevTools. Значение может быть любого типа.
40
+
* **необязательный** `format`: Функция форматирования. При осмотре компонента React DevTools вызовет функцию форматирования с `value`в качестве аргумента, а затем отобразит возвращаемое отформатированное значение (которое может иметь любой тип). Если не указать функцию форматирования, то будет отображено исходнное значение `value`.
41
41
42
-
#### Returns {/*returns*/}
42
+
#### Возвращаемое значение {/*returns*/}
43
43
44
-
`useDebugValue`does not return anything.
44
+
`useDebugValue`ничего не возвращает.
45
45
46
-
## Usage {/*usage*/}
46
+
## Использование {/*usage*/}
47
47
48
-
### Adding a label to a custom Hook {/*adding-a-label-to-a-custom-hook*/}
48
+
### Добавление метки к пользовательскому хуку {/*adding-a-label-to-a-custom-hook*/}
49
49
50
-
Call`useDebugValue`at the top level of your [custom Hook](/learn/reusing-logic-with-custom-hooks) to display a readable <CodeStep step={1}>debug value</CodeStep> for [React DevTools.](/learn/react-developer-tools)
50
+
Вызовите`useDebugValue`на верхнем уровне [пользовательского хука](/learn/reusing-logic-with-custom-hooks), чтобы отобразить читаемое отладочное значение <CodeStep step={1}>debug value</CodeStep> в [React DevTools.](/learn/react-developer-tools)
51
51
52
52
```js [[1, 5, "isOnline ? 'Online' : 'Offline'"]]
53
53
import { useDebugValue } from'react';
@@ -59,11 +59,11 @@ function useOnlineStatus() {
59
59
}
60
60
```
61
61
62
-
This gives components calling`useOnlineStatus` a label like`OnlineStatus:"Online"`when you inspect them:
62
+
В результате компоненты, вызывающие`useOnlineStatus`, получают метку типа`OnlineStatus:"Online"`при их осмотре:
63
63
64
-

Without the`useDebugValue`call, only the underlying data (in this example, `true`) would be displayed.
66
+
Без вызова`useDebugValue`отображались бы только базовые данные (в данном примере - `true`).
67
67
68
68
<Sandpack>
69
69
@@ -103,20 +103,20 @@ function subscribe(callback) {
103
103
104
104
<Note>
105
105
106
-
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.
106
+
Не добавляйте отладочные значения в каждый пользовательский хук. Это ценнее для пользовательских хуков, которые являются частью общих библиотек и имеют сложную внутреннюю структуру данных, которую трудно проверить.
107
107
108
108
</Note>
109
109
110
110
---
111
111
112
-
### Deferring formatting of a debug value {/*deferring-formatting-of-a-debug-value*/}
112
+
### Отсрочка форматирования отладочного значения {/*deferring-formatting-of-a-debug-value*/}
113
113
114
-
You can also pass a formatting function as the second argument to`useDebugValue`:
114
+
Вы можете передать функцию форматирования в качестве второго аргумента в`useDebugValue`:
Your formatting function will receive the <CodeStep step={1}>debug value</CodeStep> as a parameter and should return a <CodeStep step={2}>formatted display value</CodeStep>. When your component is inspected, React DevTools will call this function and display its result.
120
+
Ваша функция форматирования будет получать в качестве параметра <CodeStep step={1}>debug value</CodeStep> и должна возвращать <CodeStep step={2}>форматированное отображаемое значение</CodeStep>. Когда ваш компонент будет осмотрен, React DevTools вызовет эту функцию и отобразит ее результат.
121
121
122
-
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.
122
+
Это позволит избежать выполнения потенциально дорогостоящей логики форматирования, если компонент не проверяется. Например, если`date`является значением Date, это позволит избежать вызова `toDateString()`для него при каждом рендеринге.
0 commit comments