Хуки — нововведение в React 16.8, которое позволяет использовать состояние и другие возможности React без написания классов.
\nХуки — обычные JavaScript-функции, но существует два правила, которым нужно следовать. Чтобы автоматически их применять мы создали плагин для линтера:
\nНе используйте хуки внутри циклов, условных операторов или вложенных функций. Вместо этого всегда используйте хуки только на верхнем уровне React-функций. Исполнение этого правила гарантирует, что хуки вызываются в одинаковой последовательности при каждом рендере компонента. Это позволит React правильно сохранять состояние хуков между множественными вызовами useState и useEffect. (Если вам интересно, подробное объяснение ниже.)
Не вызывайте хуки из обычных функций JavaScript. Вместо этого можно:
\nСледуя этому правилу, можно гарантировать, что вся логика состояния компонента чётко видна из исходного кода.
\nМы выпустили плагин для ESLint eslint-plugin-react-hooks, который принуждает к соблюдению этих двух правил. Если хотите испытать его в деле, добавьте этот плагин в ваш проект.
Этот плагин включен по умолчанию в 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. Используем переменную состояния surname\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 (но ранее был 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":[]}