Хуки — це нововведення в React 16.8. Вони дозволяють вам використовувати стан та інші можливості React без написання класів.
\nХуки — звичайні JavaScript функції, але ви маєте дотримуватися двох правил, використовуючи їх. Ми зробили плагін для лінтеру, щоб автоматично дотримуватися цих правил:
\nНе використовуйте хуки усередині циклів, умовних операторів або вкладених функцій. Замість цього завжди використовуйте хуки на вищому рівні React-функцій. Дотримуючись цього правила, ви будете певні, що хуки викликаються в однаковій послідовності кожного разу, коли рендериться компонент. Це дозволяє React коректно зберігати стан хуків між численними викликами useState та useEffect. (Якщо вам цікаво, то ми пояснимо це більш детально нижче.)
Не викликайте хуки зі звичайних JavaScript-функцій. Натомість, ви можете:
\nДотримуючись цього правила, ви можете бути певні, що вся логіка компоненту зі станом чітко проглядається в його вихідному коді.
\nМи випустили плагін для ESLint eslint-plugin-react-hooks, який примушує дотримуватися цих двох правил. Ви можете додати цей плагін до вашого проекту, якщо ви хочете його спробувати:
This plugin is included by default in Create React App.
\nnpm install eslint-plugin-react-hooks --save-dev// Ваша конфігурація ESLint\n{\n \"plugins\": [\n // ...\n \"react-hooks\"\n ],\n \"rules\": {\n // ...\n \"react-hooks/rules-of-hooks\": \"error\", // Перевіряє правила хуків\n \"react-hooks/exhaustive-deps\": \"warn\" // Перевіряє ефект залежностей\n }\n}Ви можете пропустити залишок сторінки та перейти до наступної, яка пояснює як писати користувацькі хуки. На цій сторінці ми продовжимо і надамо пояснення необхідності цих правил.
\nЯк ми дізналися раніше, в одному компоненті можна багаторазово використовувати хуки стану або ефектів:
\nfunction Form() {\n // 1. Використовуємо змінну стану name\n const [name, setName] = useState('Ліна');\n\n // 2. Використовуємо ефект для збереження стану форми\n useEffect(function persistForm() {\n localStorage.setItem('formData', name);\n });\n\n // 3. Використовуємо змінну стану state\n const [surname, setSurname] = useState('Костенко');\n\n // 4. Використовуємо ефект, щоб оновити заголовок сторінки\n useEffect(function updateTitle() {\n document.title = name + ' ' + surname;\n });\n\n // ...\n}Отже, як React дізнається який стан відповідає певному виклику useState? Відповідь наступна: React покладається на послідовність викликів хуків. Наш приклад працює тому, що послідовність викликів хуків є сталою для кожного рендеру:
// ------------\n// Перший рендер\n// ------------\nuseState('Ліна') // 1. Ініціюємо змінну name зі значенням 'Ліна'\nuseEffect(persistForm) // 2. Додаємо ефект, щоб зберегти данні форми\nuseState('Костенко') // 3. Ініціюємо змінну surname зі значенням 'Костенко'\nuseEffect(updateTitle) // 4. Додаємо ефект, щоб оновити заголовок сторінки\n\n// -------------\n// Другий рендер\n// -------------\nuseState('Ліна') // 1. Зчитуємо змінну стану name (аргумент ігнорується)\nuseEffect(persistForm) // 2. Змінюємо ефект, щоб зберегти данні форми\nuseState('Костенко') // 3. Зчитуємо змінну стану surname (аргумент ігнорується)\nuseEffect(updateTitle) // 4. Змінюємо ефект, щоб оновити заголовок сторінки\n\n// ...Доки послідовність викликів хуків залишається сталою між рендерами, React може співвідносити локальний стан між кожним з них. Але, що трапиться, якщо ми розмістимо виклик хуку (наприклад, ефект persistForm) всередину умовного оператору?
// 🔴 Ми порушуємо перше правило, розміщуючи хук всередині умовного оператору\n if (name !== '') {\n useEffect(function persistForm() {\n localStorage.setItem('formData', name);\n });\n }Умова name !== '' дорівнює true при першому рендері, тому цей хук буде виконано. Хай там що, та в наступному рендері користувач може очистити форму і таким чином змінити цю умову на false. Тепер, оскільки ми пропускаємо цей хук під час рендеру, послідовність викликів хуків стає іншою:
useState('Ліна') // 1. Зчитуємо змінну стану name (аргумент ігнорується)\n// useEffect(persistForm) // 🔴 Цей хук пропущено!\nuseState('Костенко') // 🔴 2 (але був 3). Помилка при зчитуванні змінної стану surname\nuseEffect(updateTitle) // 🔴 3 (but was 4). Помилка при зміні ефектуReact не знатиме, що повернути для другого виклику хуку useState. React очікував, що другий виклик хуку в цьому компоненті відповідає ефекту persistForm так само як і під час попереднього рендеру, але це більше не так. З цього моменту кожен наступний виклик хуку після того, що ми пропустили, також зміститься на один, що призведе до помилок.
Ось чому хуки мають викликатися на вищому рівні наших компонентів. Якщо ми хочемо викликати ефект за певної умови, то ми можемо розмістити цю умову всередину нашого хуку:
\n useEffect(function persistForm() {\n // 👍 Більше ми не порушимо перше правило\n if (name !== '') {\n localStorage.setItem('formData', name);\n }\n });Зауважте, що вам не потрібно буде піклуватися про цю проблему, якщо ви додасте до вашого проекту запропоноване правило для лінтера. Але тепер ви знаєте, чому хуки працюють таким чином, та які проблеми можна запобігти використовуючи це правило.
\nНарешті ми можемо почати вчитися тому, як писати користувацькі хуки! Хуки користувача дозволять вам комбінувати хуки впроваджені React з вашими власними абстракціями та повторно використовувати загальну логіку стану між різними компонентами.
","frontmatter":{"title":"Правила хуків","next":"hooks-custom.html","prev":"hooks-effect.html"},"fields":{"path":"content/docs/hooks-rules.md","slug":"docs/hooks-rules.html"}}},"pageContext":{"slug":"docs/hooks-rules.html"}},"staticQueryHashes":[]}