Эта статья даст вам более глубокое понимание React Hooks!

Как быстро начать работу с VUE3.0: Войдите в

предисловие

Хуки используются для использования состояния и других функций React без написания классов. Итак, что же такое хуки, почему нам следует их использовать, какие общие хуки предоставляет React и как их настроить. Ниже мы покажем их вам один за другим.

Что такое хуки?

Хуки переводятся как хуки — это функции внутри функциональных компонентов, которые отвечают за подключение к внешним функциям.

React предоставляет некоторые общие хуки, а также поддерживает пользовательские хуки. Эти хуки используются для добавления к функциям внешних функций.

Когда нам нужно ввести в компонент внешние функции, мы можем использовать перехватчики, предоставляемые React, или настроить перехватчики.

Например, если вы введете в компонент функцию управления состоянием, вы можете использовать функцию useState. Использование useState будет подробно описано ниже.

Зачем

использовать хуки Существует две основные причины использования хуков:

• упрощение повторного использования логики и
• облегчение понимания сложных компонентов;

1. Упрощение повторного использования логики.

До появления хуков React приходилось заимствовать сложные шаблоны проектирования, такие как компоненты высокого порядка и реквизиты рендеринга, для достижения повторного использования логики. Однако компоненты высокого порядка будут генерировать избыточные узлы компонентов, что усложняет отладку.

Хуки позволяют нам повторно использовать логику состояния без изменения структуры компонента. Использование пользовательских хуков будет подробно описано ниже.

2. Упростить понимание сложных компонентов.

В компонентах класса код одной и той же бизнес-логики разбросан по различным функциям жизненного цикла компонента, а хуки могут объединять код одной и той же бизнес-логики вместе, позволяя бизнес-логике быть единой. четко разделены, что упрощает понимание и поддержку кода.

4. Часто используемые хуки

1. useState

useState — это хук, который позволяет добавлять состояние в функциональные компоненты React.

Примеры использования:

import React, { useState } from 'react';

пример функции() {
  // Объявляем переменную состояния под названием "count" const [count, setCount] = useState(0);
  // ...

Приведенный выше код объявляет переменную состояния count с начальным значением 0 и обновляет текущий счетчик, вызывая setCount.

2. useEffect

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 предоставляет четыре тайминга для выполнения побочных эффектов:

• выполняется после каждого рендеринга : второй параметр зависимости не предоставляется. Например, useEffect(() => {});
• выполняется только после первого рендеринга : укажите пустой массив в качестве зависимости. Например, useEffect(() => {}, []);
• выполняется в первый раз и после изменения зависимостей : предоставляет массив зависимостей. Например, useEffect(() => {}, [deps]);
• выполняется после размонтирования компонента : возвращает функцию обратного вызова. Например, useEffect() => { return () => {} }, []).

3. useCallback

Функция обратного вызова, определенная в useCallback, будет переобъявлять функцию обратного вызова только при изменении зависимостей, тем самым гарантируя, что компонент не создаст дублирующиеся функции обратного вызова . Компонент, который получает эту функцию обратного вызова в качестве атрибута , не нужно будет часто перерисовывать .

Примеры использования:

const memoizedCallback = useCallback(() => {
  сделать что-нибудь(а, б)
}, [a, b])

Приведенный выше код переобъявит функцию обратного вызова только при изменении зависимостей a и b.

4. useMemo

Функция создания, определенная useMemo, будет пересчитываться только при изменении определенной зависимости, что помогает в вычислениях с высокими издержками, которые не будут повторяться каждый раз при рендеринге, и компонент, который получает это вычисленное значение в качестве свойства, не будет Требуется частый повторный рендеринг .

Примеры использования:

const memoizedValue = useMemo(() => ComputeExpensiveValue(a, b), [a, b])

Приведенный выше код будет пересчитываться только при изменении зависимостей a и b.

5. useRef

useRef возвращает объект ref, который сохраняется на протяжении всего жизненного цикла компонента.

Он имеет два применения:

• сохранение ссылок на узлы DOM ,
• совместное использование данных между несколькими рендерингами ;

Ниже приведен пример сохранения узла DOM:

function TextInputWithFocusButton() {
  const inputEl = useRef (ноль)
  const onButtonClick = () => {
    // `current` указывает на элемент ввода текста inputEl.current.focus(), который был смонтирован в DOM
  }
  возвращаться (
    <>
      
      Фокусировка ввода
    
  )
}

Приведенный выше код создает объект 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} секунд.
      

      Начать
      Пауза