Skip to content

"Зворотного" та одруки #299

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
vldmrkl merged 1 commit into from
Aug 15, 2021
Merged

"Зворотного" та одруки #299

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 10 additions & 10 deletions content/docs/refs-and-the-dom.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ redirect_from:

> Примітка:
>
> Приклади нижче були оновлені для використання `React.createRef()` API, що з'явився у React 16.3. Якщо ви використуєте попередню версію React, ми рекомендуємо використовувати [рефи зворотнього виклику](#callback-refs).
> Приклади нижче були оновлені для використання `React.createRef()` API, що з'явився у React 16.3. Якщо ви використуєте попередню версію React, ми рекомендуємо використовувати [рефи зворотного виклику](#callback-refs).

### Створення рефів {#creating-refs}

Expand Down Expand Up @@ -201,13 +201,13 @@ function CustomTextInput(props) {

Ми не рекомендуємо підхід передачі DOM-вузлів, але він може стати рятувальним жилетом. Зверніть увагу, що цей підхід потребує написання додаткового коду для дочірніх комопонетів. Якщо у вас взагалі немає котролю над реалізацією дочірніх компонентів, то ваш остання можливість — скористатися методом [`findDOMNode()`](/docs/react-dom.html#finddomnode), але цей метод нерекомендований та вважається застарілим у [`StrictMode`](/docs/strict-mode.html#warning-about-deprecated-finddomnode-usage).

### Рефи зворотнього виклику {#callback-refs}
### Рефи зворотного виклику {#callback-refs}

React також підтримує інший варіант ініціалізації рефів, що називається "рефи зворотнього виклику" ("callback refs"), що дає більший контроль над процесом визначення та очищення рефів.
React також підтримує інший варіант ініціалізації рефів, що називається "рефи зворотного виклику" ("callback refs"), що дає більший контроль над процесом визначення та очищення рефів.

На відміну від передачі рефа, що створений функцією `createRef()`, через атрибути `ref`, ви передаєте функцію. Функція отримує екземпляр компонента чи DOM-елемент у вигляді аргумента, який можна використати або зберегти.

Приклад нижче реалізує поширений паттерн: використання функції зворотнього виклику у `ref` для зберігання посилання на DOM-вузл в екземплері.
Приклад нижче реалізує поширений паттерн: використання функції зворотного виклику у `ref` для зберігання посилання на DOM-вузол в екземплярі.

```javascript{5,7-9,11-14,19,29,34}
class CustomTextInput extends React.Component {
Expand All @@ -232,7 +232,7 @@ class CustomTextInput extends React.Component {
}

render() {
// Використання функції зворотнього виклику в `ref` для зберігання посилання на DOM-елемент
// Використання функції зворотного виклику в `ref` для зберігання посилання на DOM-елемент
// текстове поле введення в екземплярі (наприклад, this.textInput).
return (
<div>
Expand All @@ -251,9 +251,9 @@ class CustomTextInput extends React.Component {
}
```

React викличе функцію зворотнього виклику `ref` з DOM-елементом, коли компонент буде примонтований, та виконає її зі значенням `null`, коли компонент буде прибрано. Рефи гарантують актуальність перед викликом метода `componentDidMount` або `componentDidUpdate`.
React викличе функцію зворотного виклику `ref` з DOM-елементом, коли компонент буде примонтований, та виконає її зі значенням `null`, коли компонент буде прибрано. Рефи гарантують актуальність перед викликом метода `componentDidMount` або `componentDidUpdate`.

Ви можете передавати реф зворотнього виклику між компонентами так само як і реф, що створюється викликом функції `React.createRef()`.
Ви можете передавати реф зворотного виклику між компонентами так само як і реф, що створюється викликом функції `React.createRef()`.

```javascript{4,13}
function CustomTextInput(props) {
Expand All @@ -275,16 +275,16 @@ class Parent extends React.Component {
}
```

У попередньому прикладі, `Parent` передає свій реф зворотнього виклику як проп `inputRef` нащадку `CustomTextInput`, і вже `CustomTextInput` передає цю функцію як спеціалізований атрибут `ref` до `<input>`. Як результат, `this.inputElement` у `Parent` буде посиланням на DOM-вузол, що відповідає елементу `<input>` у компонента `CustomTextInput`.
У попередньому прикладі, `Parent` передає свій реф зворотного виклику як проп `inputRef` нащадку `CustomTextInput`, і вже `CustomTextInput` передає цю функцію як спеціалізований атрибут `ref` до `<input>`. Як результат, `this.inputElement` у `Parent` буде посиланням на DOM-вузол, що відповідає елементу `<input>` у компонента `CustomTextInput`.

### Застарілий API: рядкові рефи {#legacy-api-string-refs}

Якщо ви працювали з React раніше, ви мабуть знайомі зі старим API, де атрибут `ref` може бути рядком, наприклад `"textInput"`, в той самий час DOM-вузол стає доступним через `this.refs.textInput`. Ми не радимо користуватися ним, тому що рядкові рефи мають [деякі проблеми](https://github.com/facebook/react/pull/8333#issuecomment-271648615), також цей API вважається застарілим, та **ймовірно буде видалений в одній з майбутніх версій**.

> Примітка:
>
> Якщо ви досі користуєтесь `this.refs.textInput` для доступу до рефів, ми рекомендуємо натомість користовуватися [рефами зворотнього виклику](#callback-refs) або [`createRef` API](#creating-refs).
> Якщо ви досі користуєтесь `this.refs.textInput` для доступу до рефів, ми рекомендуємо натомість користовуватися [рефами зворотного виклику](#callback-refs) або [`createRef` API](#creating-refs).

### Застереження до рефів зворотнього виклику {#caveats-with-callback-refs}
### Застереження до рефів зворотного виклику {#caveats-with-callback-refs}

Якщо `ref` визначено як вбудовану функцію, то вона буде виклакана двічі протягом оновлень, перший раз з `null`, потім з посиланням на DOM-елемент. Це відбувається, тому що створюється новий екземпляр функції під час кожного рендеру, так як React потребує очистити старий реф та встановити новий. Щоб запобігти цьому, просто передайте в `ref` метод класу, але зверніть увагу, що в більшості випадків це не має значення.