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

Author: Harmyder

content/docs/refs-and-the-dom.md

@@ -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}
 
@@ -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 {
@@ -232,7 +232,7 @@ class CustomTextInput extends React.Component {
   }
 
   render() {
-    // Використання функції зворотнього виклику в `ref` для зберігання посилання на DOM-елемент
+    // Використання функції зворотного виклику в `ref` для зберігання посилання на DOM-елемент
     // текстове поле введення в екземплярі (наприклад, this.textInput).
     return (
       <div>
@@ -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) {
@@ -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` метод класу, але зверніть увагу, що в більшості випадків це не має значення.