Skip to content

Commit fe92c28

Browse files
authored
Merge pull request #906 from kmpeeduwee/translate-useDebugValue
Add translate useDebugValue
2 parents 8e2e9c6 + 10f79a8 commit fe92c28

File tree

1 file changed

+20
-20
lines changed

1 file changed

+20
-20
lines changed

src/content/reference/react/useDebugValue.md

Lines changed: 20 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ title: useDebugValue
44

55
<Intro>
66

7-
`useDebugValue` is a React Hook that lets you add a label to a custom Hook in [React DevTools.](/learn/react-developer-tools)
7+
Хук `useDebugValue` позволяет добавить метку к пользовательскому хуку в [React DevTools.](/learn/react-developer-tools)
88

99
```js
1010
useDebugValue(value, format?)
@@ -16,11 +16,11 @@ useDebugValue(value, format?)
1616
1717
---
1818
19-
## Reference {/*reference*/}
19+
## Справочник {/*reference*/}
2020
2121
### `useDebugValue(value, format?)` {/*usedebugvalue*/}
2222
23-
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), чтобы отобразить читаемое отладочное значение:
2424
2525
```js
2626
import { useDebugValue } from 'react';
@@ -32,22 +32,22 @@ function useOnlineStatus() {
3232
}
3333
```
3434
35-
[See more examples below.](#usage)
35+
[Больше примеров ниже.](#usage)
3636
37-
#### Parameters {/*parameters*/}
37+
#### Параметры {/*parameters*/}
3838
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`.
4141
42-
#### Returns {/*returns*/}
42+
#### Возвращаемое значение {/*returns*/}
4343
44-
`useDebugValue` does not return anything.
44+
`useDebugValue` ничего не возвращает.
4545
46-
## Usage {/*usage*/}
46+
## Использование {/*usage*/}
4747
48-
### Adding a label to a custom Hook {/*adding-a-label-to-a-custom-hook*/}
48+
### Добавление метки к пользовательскому хуку {/*adding-a-label-to-a-custom-hook*/}
4949
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)
5151
5252
```js [[1, 5, "isOnline ? 'Online' : 'Offline'"]]
5353
import { useDebugValue } from 'react';
@@ -59,11 +59,11 @@ function useOnlineStatus() {
5959
}
6060
```
6161
62-
This gives components calling `useOnlineStatus` a label like `OnlineStatus: "Online"` when you inspect them:
62+
В результате компоненты, вызывающие `useOnlineStatus`, получают метку типа `OnlineStatus: "Online"` при их осмотре:
6363
64-
![A screenshot of React DevTools showing the debug value](/images/docs/react-devtools-usedebugvalue.png)
64+
![Скриншот React DevTools показывающий отладочное значение](/images/docs/react-devtools-usedebugvalue.png)
6565
66-
Without the `useDebugValue` call, only the underlying data (in this example, `true`) would be displayed.
66+
Без вызова `useDebugValue` отображались бы только базовые данные (в данном примере - `true`).
6767
6868
<Sandpack>
6969
@@ -103,20 +103,20 @@ function subscribe(callback) {
103103
104104
<Note>
105105
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+
Не добавляйте отладочные значения в каждый пользовательский хук. Это ценнее для пользовательских хуков, которые являются частью общих библиотек и имеют сложную внутреннюю структуру данных, которую трудно проверить.
107107
108108
</Note>
109109
110110
---
111111
112-
### Deferring formatting of a debug value {/*deferring-formatting-of-a-debug-value*/}
112+
### Отсрочка форматирования отладочного значения {/*deferring-formatting-of-a-debug-value*/}
113113
114-
You can also pass a formatting function as the second argument to `useDebugValue`:
114+
Вы можете передать функцию форматирования в качестве второго аргумента в `useDebugValue`:
115115
116116
```js [[1, 1, "date", 18], [2, 1, "date.toDateString()"]]
117117
useDebugValue(date, date => date.toDateString());
118118
```
119119
120-
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 вызовет эту функцию и отобразит ее результат.
121121
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

Comments
 (0)