{"componentChunkName":"component---src-templates-docs-js","path":"/docs/hooks-overview.html","result":{"data":{"markdownRemark":{"html":"

Хуки — новинка у React 16.8, яка дозволяє використовувати стан та інші можливості React без написання класу.

\n

Хуки назад сумісні. Майте на увазі, що це біглий огляд хуків, який більше підійде для досвідчених користувачів React. Якщо ви заплутаєтесь, шукайте такий жовтий блок:

\n
\n

Докладне пояснення

\n

Якщо ви хочете зрозуміти, чому ми додаємо хуки в React, ознайомтесь з розділом Мотивація.

\n
\n

↑↑↑ Кожен розділ закінчується таким жовтим блоком. Вони містять докладне пояснення.

\n

📌 Хук стану

\n

Розглянемо приклад, в якому рендериться лічильник. Коли ви натискаєте кнопку, значення лічильника збільшується:

\n
import React, { useState } from 'react';\nfunction Example() {\n  // Оголошуємо нову змінну стану \"count\"  const [count, setCount] = useState(0);\n  return (\n    <div>\n      <p>Ви натиснули {count} разів</p>\n      <button onClick={() => setCount(count + 1)}>\n        Натисни мене\n      </button>\n    </div>\n  );\n}
\n

У цьому прикладі, useState — це хук (визначення хуку наведенно нижче). Ми викликаємо його для того, щоб надати внутрішній стан нашому компоненту. React буде зберігати цей стан між повторними рендерами. Виклик useState повертає дві речі: значення поточного стану та функцію, яка дозволяє оновлювати цей стан. Ви можете викликати цю функцію де завгодно, наприклад, з обробника подій. Вона схожа з this.setState у класах, за винятком того, що не об’єднує новий та старий стан. Порівняння хука useState та this.state приведено на сторінці Використання хука стану.

\n

Єдиним аргументом для useState є початкове значення стану. У наведеному вище прикладі — це 0, тому що наш лічильник починається з нуля. Зауважте, що на відміну від this.state, у нашому випадку стан може, але не зобов’язаний, бути об’єктом. Початкове значення аргументу використовується тільки під час першого рендера.

\n

Оголошення декількох змінних стану

\n

Ви можете використовувати хук стану більше одного разу в одному компоненті:

\n
function ExampleWithManyStates() {\n  // Оголошуємо декілька змінних стану!\n  const [age, setAge] = useState(42);\n  const [fruit, setFruit] = useState('банан');\n  const [todos, setTodos] = useState([{ text: 'Вивчити хуки' }]);\n  // ...\n}
\n

Синтаксис деструктуризації масивів дозволяє нам по різному називати змінні стану, які ми оголошуємо при виклику useState. Ці імена не є частиною API useState. Замість цього, React припускає, що якщо ви викликаєте useState багато разів, то ви робите це в тому ж порядку під час кожного рендеру. Ми пояснимо, чому це працює та коли це стане в нагоді, трохи пізніше.

\n

Що ж таке хук?

\n

Хуки — це функції, за допомогою яких ви можете “зачепитися” за стан та методи життєвого циклу React з функціональних компонентів. Хуки не працюють всередині класів — вони дають вам можливість використовувати React без класів. (Ми не рекомендуємо відразу ж переписувати існуючі компоненти, але за бажанням, ви можете почати використовувати хуки у своїх нових компонентах.)

\n

React містить кілька вбудованих хуків, таких як useState. Ви також можете створювати власні хуки, щоб повторно використовувати їх в інших своїх компонентах. Для початку, розглянемо вбудовані хуки.

\n
\n

Докладне пояснення

\n

Ви можете дізнатися більше на сторінці: Використання хука стану.

\n
\n

⚡️ Хук ефекту

\n

Вам, напевно, доводилося створювати запити даних, робити підписки або вручну змінювати DOM з React-компонента. Ми називаємо ці операції “побічними ефектами” (або скорочено “ефекти”), так як вони можуть впливати на роботу інших компонентів і не можуть бути виконані під час рендеринга.

\n

За допомогою хука ефекту useEffect ви можете виконувати побічні ефекти із функціонального компонента. Він виконує таку ж саму роль, що і componentDidMount, componentDidUpdate та componentWillUnmount у React-класах, об’єднавши їх в єдиний API. (Ми порівняємо useEffect з іншими методами на сторінці Використання хука ефекту.)

\n

Наприклад, цей компонент встановлює заголовок документа після того, як React оновлює DOM:

\n
import React, { useState, useEffect } from 'react';\nfunction Example() {\n  const [count, setCount] = useState(0);\n\n  // Подібно до componentDidMount та componentDidUpdate:  useEffect(() => {    // Оновлюємо заголовок документа, використовуючи API браузера    document.title = `Ви натиснули ${count} разів`;  });\n  return (\n    <div>\n      <p>Ви натиснули {count} разів</p>\n      <button onClick={() => setCount(count + 1)}>\n        Натисни мене\n      </button>\n    </div>\n  );\n}
\n

Коли ви викликаєте useEffect, React отримує вказівку запустити вашу функцію з “ефектом” після того, як він відправив зміни у DOM. Оскільки ефекти оголошуються всередині компонентів, то у них є доступ до пропсів та стану. За замовчуванням, React запускає ефекти після кожного рендеру, включаючи перший рендер. (Ми розглянемо більш докладно, як це відрізняється від класових методів життєвого циклу на сторінці Використання ефекту хука.)

\n

У разі потреби, ви можете повернути з ефекта функцію, яка вказує ефекту, як виконати за собою “скидання”. Наприклад, цей компонент використовує ефект, щоб підписатися на статус друга в мережі, і виконує скидання, відписуючись від нього:

\n
import React, { useState, useEffect } from 'react';\n\nfunction FriendStatus(props) {\n  const [isOnline, setIsOnline] = useState(null);\n\n  function handleStatusChange(status) {\n    setIsOnline(status.isOnline);\n  }\n\n  useEffect(() => {    ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);    return () => {      ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);    };  });\n  if (isOnline === null) {\n    return 'Завантаження...';\n  }\n  return isOnline ? 'В мережі' : 'Не в мережі';\n}
\n

У наступному прикладі, React буде відписуватись від нашого ChatAPI перед тим, як компонент розмонтується та перед тим, як перезавантажити ефект у повторному рендері. (Ви можете зробити так, щоб React пропускав повторні підписки, якщо props.friend.id, який ми передали до ChatAPI, залишився без змін.)

\n

Подібно до useState, ви можете використовувати більше одного ефекту в документі:

\n
function FriendStatusWithCounter(props) {\n  const [count, setCount] = useState(0);\n  useEffect(() => {    document.title = `Ви натиснули ${count} разів`;\n  });\n\n  const [isOnline, setIsOnline] = useState(null);\n  useEffect(() => {    ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);\n    return () => {\n      ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);\n    };\n  });\n\n  function handleStatusChange(status) {\n    setIsOnline(status.isOnline);\n  }\n  // ...
\n

Хуки дають вам можливість організувати побічні ефекти в компоненті по зв’язаним частинам (наприклад, додавання або скасування підписки), замість того, щоб примушувати вас ділити все згідно методів життєвого циклу.

\n
\n

Докладне пояснення

\n

Ви можете дізнатися більше про useEffect на сторінці Використання хука ефекту.

\n
\n

✌️ Правила хуків

\n

Хуки — це функції JavaScript, але вони накладають два додаткових правила:

\n\n

Ми розробили спеціальний плагін для лінтера, який допомогає забезпечувати дотримання цих правил. Ми розуміємо, що ці правила можуть здатися трохи незрозумілими і накласти певні обмеження, але вони дуже важливі для правильної роботи хуків.

\n
\n

Докладне пояснення

\n

Ви можете дізнатися більше на сторінці правила хуків.

\n
\n

💡 Створення власних хуків

\n

Інколи треба повторно використовувати однакову логіку стану в декількох компонентах. Традиційно використовувалися два підходи: компоненти вищого порядку та рендер-пропси. За допомогою користувацьких хуків це завдання вирішується без додавання непотрібних компонентів у ваше дерево.

\n

Раніше на цій сторінці ми розглядали компонент FriendStatus, який викликав хуки useState та useEffect для того, щоб підписатися на статус друга в мережі. Припустимо, що ми хочемо використати цю логіку з підпискою ще раз, але вже в іншому компоненті.

\n

Перш за все, давайте винесемо цю логіку в користувацький хук useFriendStatus:

\n
import React, { useState, useEffect } from 'react';\n\nfunction useFriendStatus(friendID) {  const [isOnline, setIsOnline] = useState(null);\n\n  function handleStatusChange(status) {\n    setIsOnline(status.isOnline);\n  }\n\n  useEffect(() => {\n    ChatAPI.subscribeToFriendStatus(friendID, handleStatusChange);\n    return () => {\n      ChatAPI.unsubscribeFromFriendStatus(friendID, handleStatusChange);\n    };\n  });\n\n  return isOnline;\n}
\n

Хук приймає friendID як аргумент і повертає змінну, яка показує в мережі наш друг чи ні.

\n

Тепер ми можемо використовувати цей хук в обох компонентах:

\n
function FriendStatus(props) {\n  const isOnline = useFriendStatus(props.friend.id);\n  if (isOnline === null) {\n    return 'Завантаження...';\n  }\n  return isOnline ? 'В мережі' : 'Не в мережі';\n}
\n
function FriendListItem(props) {\n  const isOnline = useFriendStatus(props.friend.id);\n  return (\n    <li style={{ color: isOnline ? 'green' : 'black' }}>\n      {props.friend.name}\n    </li>\n  );\n}
\n

Стан кожного компонента ніяким чином не залежить одне від одного. Хуки — це спосіб повторно використовувати логіку стану, а не сам стан. Більш того, кожний виклик хука забезпечує абсолютно ізольований стан. Ви навіть можете використовувати один і той самий хук декілька разів в одному компоненті.

\n

Користувацькі хуки — це більше конвенція, аніж доповнення. Якщо ім’я функції починається з ”use” і вона викликає інші хуки, ми розцінюємо це як користувацький хук. Якщо ви будете дотримуватися конвенції useSomething при іменуванні хуків, це дозволить нашому плагіну для лінтера знайти помилки в коді, який використовує хуки.

\n

Є багато випадків для написання користувацьких хуків, таких як робота з формами, анімації, декларативні підписки, таймери і, напевно, багато інших про які ми навіть не думали. Ми з нетерпінням чекаємо побачити, які ж користувацькі хуки спільнота React зможе придумати.

\n
\n

Докладне пояснення

\n

Ви можете дізнатися більше про користувацькі хуки на сторінці Створення користувацьких хуків.

\n
\n

🔌 Інші хуки

\n

Є ще кілька менш використовуваних вбудованих хуків, які можуть стати вам в нагоді. Наприклад, за допомогою useContext ви можете підписатися на контекст React без використання будь-яких вкладень:

\n
function Example() {\n  const locale = useContext(LocaleContext);  const theme = useContext(ThemeContext);  // ...\n}
\n

А хук useReducer надає можливість управляти внутрішнім станом більш складного компонента за допомогою редюсера:

\n
function Todos() {\n  const [todos, dispatch] = useReducer(todosReducer);  // ...
\n
\n

Докладне пояснення

\n

Ви можете дізнатися більше про вбудовані хуки на сторінці API-довідки хуків.

\n
\n

Що далі?

\n

Фух, давайте перестанемо поспішати і трохи охолодимо запал! Якщо вам щось незрозуміло або ви хочете дізнатися про що-небудь більш детально, ви можете почати читати наступні сторінки, починаючи з документації хука стану.

\n

Ви також можете переглянути API-довідник хуків і FAQ хуків.

\n

Нарешті, не проходьте повз вступної сторінки, яка пояснює чому ми додаємо хуки та як ми плануємо використовувати їх разом з класами без необхідності переписувати наші програми.

","frontmatter":{"title":"Огляд хуків","next":"hooks-state.html","prev":"hooks-intro.html"},"fields":{"path":"content/docs/hooks-overview.md","slug":"docs/hooks-overview.html"}}},"pageContext":{"slug":"docs/hooks-overview.html"}},"staticQueryHashes":[]}