Как быстро начать работу с VUE3.0: Войдите в
Хуки используются для использования состояния и других функций React без написания классов. Итак, что же такое хуки, почему нам следует их использовать, какие общие хуки предоставляет React и как их настроить. Ниже мы покажем их вам один за другим.
Хуки переводятся как хуки — это функции внутри функциональных компонентов, которые отвечают за подключение к внешним функциям.
React предоставляет некоторые общие хуки, а также поддерживает пользовательские хуки. Эти хуки используются для добавления к функциям внешних функций.
Когда нам нужно ввести в компонент внешние функции, мы можем использовать перехватчики, предоставляемые React, или настроить перехватчики.
Например, если вы введете в компонент функцию управления состоянием, вы можете использовать функцию useState. Использование useState будет подробно описано ниже.
использовать хуки Существует две основные причины использования хуков:
До появления хуков React приходилось заимствовать сложные шаблоны проектирования, такие как компоненты высокого порядка и реквизиты рендеринга, для достижения повторного использования логики. Однако компоненты высокого порядка будут генерировать избыточные узлы компонентов, что усложняет отладку.
Хуки позволяют нам повторно использовать логику состояния без изменения структуры компонента. Использование пользовательских хуков будет подробно описано ниже.
В компонентах класса код одной и той же бизнес-логики разбросан по различным функциям жизненного цикла компонента, а хуки могут объединять код одной и той же бизнес-логики вместе, позволяя бизнес-логике быть единой. четко разделены, что упрощает понимание и поддержку кода.
useState — это хук, который позволяет добавлять состояние в функциональные компоненты React.
Примеры использования:
import React, { useState } from 'react';
пример функции() {
// Объявляем переменную состояния под названием "count" const [count, setCount] = useState(0);
// ... Приведенный выше код объявляет переменную состояния count с начальным значением 0 и обновляет текущий счетчик, вызывая setCount.
useEffect позволяет выполнять операции с побочными эффектами в функциональных компонентах.
Побочные эффекты относятся к фрагменту кода, который не имеет ничего общего с текущими результатами выполнения. Общие операции с побочными эффектами включают сбор данных, настройку подписок и ручное изменение DOM в компонентах React.
useEffect может принимать два параметра, код выглядит следующим образом:
useEffect(callback, dependency)
Первый параметр — это обратный вызов функции, который должен быть выполнен, а второй параметр — это необязательные зависимости массива зависимостей.
Зависимость является необязательной. Если она не указана, обратный вызов будет выполняться каждый раз при выполнении функционального компонента. Если она указана, она будет выполняться только при изменении значения в зависимости.
Примеры использования следующие:
function Пример() {
const [count, setCount] = useState(0);
// Похоже на компонентDidMount и компонентDidUpdate:
useEffect(() => {
// Обновляем заголовок документа с помощью API браузера
document.title = `Вы нажали ${count} раз`;
возврат () => {
// Может использоваться для очистки, что эквивалентно компонентуComponentWillUnmount компонента класса
}
}, [count]); // Укажите зависимость как count и выполните побочный эффект при обновлении счетчика // ... Приведенный выше код использует useEffect для реализации функции побочного эффекта при обновлении счетчика зависимостей и ее очистки. вернув функцию обратного вызова Последний результат выполнения.
Кроме того, useEffect предоставляет четыре тайминга для выполнения побочных эффектов:
Функция обратного вызова, определенная в useCallback, будет переобъявлять функцию обратного вызова только при изменении зависимостей, тем самым гарантируя, что компонент не создаст дублирующиеся функции обратного вызова . Компонент, который получает эту функцию обратного вызова в качестве атрибута , не нужно будет часто перерисовывать .
Примеры использования:
const memoizedCallback = useCallback(() => {
сделать что-нибудь(а, б)
}, [a, b]) Приведенный выше код переобъявит функцию обратного вызова только при изменении зависимостей a и b.
Функция создания, определенная useMemo, будет пересчитываться только при изменении определенной зависимости, что помогает в вычислениях с высокими издержками, которые не будут повторяться каждый раз при рендеринге, и компонент, который получает это вычисленное значение в качестве свойства, не будет Требуется частый повторный рендеринг .
Примеры использования:
const memoizedValue = useMemo(() => ComputeExpensiveValue(a, b), [a, b])
Приведенный выше код будет пересчитываться только при изменении зависимостей a и b.
useRef возвращает объект ref, который сохраняется на протяжении всего жизненного цикла компонента.
Он имеет два применения:
Ниже приведен пример сохранения узла DOM:
function TextInputWithFocusButton() {
const inputEl = useRef (ноль)
const onButtonClick = () => {
// `current` указывает на элемент ввода текста inputEl.current.focus(), который был смонтирован в DOM
}
возвращаться (
<>
<input ref={inputEl} type='text' />
<button onClick={onButtonClick}>Фокусировка ввода</button>
</>
)
} Приведенный выше код создает объект ref с помощью useRef, сохраняет ссылку на узел DOM и может выполнять операции DOM с ref.current.
Пример совместного использования данных между несколькими рендерами следующий:
import React, { useState, useCallback, useRef } from 'react'
экспортировать функцию по умолчанию Timer() {
//Определение состояния времени для сохранения накопленного времени синхронизации const [time, setTime] = useState(0)
// Определить таймер. Такой контейнер используется для сохранения переменной между межкомпонентными рендерингами const timer = useRef(null)
// Функция обработчика событий для начала отсчета времени const handleStart = useCallback(() => {
// Используйте текущий атрибут, чтобы установить значение ref timer.current = window.setInterval(() => {
setTime((время) => время + 1)
}, 100)
}, [])
// Функция обработки событий времени паузы const handlePause = useCallback(() => {
// ИспользуйтеclearInterval, чтобы остановить отсчет времени window.clearInterval(timer.current)
timer.current = ноль
}, [])
возвращаться (
<дел>
{время / 10} секунд.
<br />
<button onClick={handleStart}>Начать</button>
<button onClick={handlePause}>Пауза</button>
</div>
)
} Приведенный выше код создает объект ref с именем переменной timer с помощью useRef. Этот объект можно вызывать при рендеринге между компонентами, создавать новый таймер при запуске отсчета времени и очищать таймер при приостановке отсчета времени.
useContext используется для получения объекта контекста и возврата значения контекста, что позволяет обеспечить межуровневое совместное использование данных.
Пример следующий:
//Создаем объект контекста const MyContext = React.createContext(initialValue)
функция Приложение() {
возвращаться (
// Передаем значение контекста через Context.Provider <MyContext.Provider value='1'>
<Контейнер />
</MyContext.Provider>
)
}
функция Контейнер() {
вернуть <Тест />
}
функция Тест() {
// Получаем значение Context const theme = useContext(MyContext) // 1
вернуть <div></div>
} Приведенный выше код получает контекст, определенный в компоненте приложения, через useContext, обеспечивая совместное использование данных между иерархическими компонентами.
useReducer используется для представления функции редуктора.
Пример следующий:
const [состояние, диспетчеризация] = useReducer(reducer, InitialState)
Он принимает функцию Редуктор и начальное значение состояния в качестве параметров и возвращает массив. Первый член массива — это текущее значение состояния, а второй член — это функция отправки, которая отправляет действие.
. С помощью настраиваемых хуков логику компонента можно извлечь в повторно используемые функции.
Пользовательские хуки — это функции, которые имеют две характеристики, отличающие их от обычных функций:
Пример следующий:
import { useState, useCallback } from 'react'
функция useCounter() {
// Определить счетчик, это состояние используется для сохранения текущего значения const [count, setCount] = useState(0)
// Реализуем операцию добавления 1 константного приращения = useCallback(() => setCount(count + 1), [count])
// Реализуем операцию уменьшения на 1 const decrement = useCallback(() => setCount(count - 1), [count])
//Сбрасываем счетчик const reset = useCallback(() => setCount(0), [])
// Экспортируем операции бизнес-логики для использования вызывающей стороной return { count, инкремент, декремент, сброс }
}
// компонент 1
функция MyComponent1() {
const { count, инкремент, декремент, сброс } = useCounter()
}
// компонент 2
функция MyComponent2() {
const { count, инкремент, декремент, сброс } = useCounter()
} Приведенный выше код легко повторно использует бизнес-логику между компонентами MyComponent1 и MyComponent2 путем настройки перехватчиков useCounter.
React официально предоставляет библиотеку реагирования, которая инкапсулирует большое количество пользовательских хуков, которые можно использовать напрямую, что помогает нам упростить внутреннюю логику компонентов и улучшить читаемость и удобство обслуживания кода.
Среди них наиболее часто используемые пользовательские перехватчики:
Вы можете зайти на официальный сайт реакции-использования, чтобы узнать, как его использовать.
В этой статье React Hooks рассматривается с четырех аспектов: что такое Hooks, зачем их использовать, какие общие Hooks предоставляет React и как настраивать React Hooks. Я считаю, что каждый имеет более глубокое понимание React Hooks.
Надеюсь, это вам поможет, спасибо, что читаете~