Hooks — это новое дополнение в React 16.8.

  1. Типы хуков

Основные хуки: useState, useEffect, useContext.

Дополнительные хуки: useReducer, useCallback, useMemo, useRef, useImperativeHandle, useLayoutEffect, useDebugValue.

2. Правила хуков (делать и не делать)

  • Вызывайте хуки только на верхнем уровне.
  • Не вызывайте хуки внутри циклов, условий или вложенных функций.
  • Вызывайте хуки только из функций React.
  • Не вызывайте хуки из обычных функций JavaScript.

3. Пользовательские хуки

Могут быть случаи, когда мы использовали одну и ту же повторяющуюся и избыточную логику с отслеживанием состояния внутри нескольких компонентов, полагаясь на реквизиты рендеринга и компоненты более высокого порядка. С помощью пользовательских хуков мы можем сделать это намного проще и чище.

Пользовательские хуки — это не что иное, как функция JavaScript, имя которой начинается с «use» и которая может вызывать другие хуки.

Допустим, у нас есть 2 функции (компонента), которые реализуют некоторую общую логику. Мы можем создать третью функцию с этой общей логикой и реализовать ее в двух других функциях.

4.Характеристики пользовательских хуков

  • Начните с префикса слова использовать при использовании Пользовательских хуков.
  • Между дизайном Hooks и Custom Hooks нет никаких различий. По сути, мы не вносим никаких изменений в поведение. Все, что мы сделали, это извлекли некоторый общий код между двумя функциями в отдельную функцию.
  • Два компонента, использующие один и тот же хук, не могут совместно использовать состояние и эффект внутри него.
  • Когда мы вызываем хуки, такие как useState и useEffect, каждый вызов хука становится изолированным. Они будут полностью независимы при вызове.

5. используйтеMemo

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

В случае вычислений запоминание – это метод оптимизации, используемый в первую очередь для повышения производительности приложений за счет сохранения результатов ресурсоемких вызовов функций и возврата кэшированного результата при повторении одних и тех же входных данных. Синтаксис:

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

Который возвращает запомненное значение.

Он должен передать функцию create и массив зависимостей. useMemo будет пересчитывать значение memoized только тогда, когда одна из зависимостей изменится. Эта оптимизация помогает избежать дорогостоящих вычислений при каждом рендеринге.

6. Массив зависимостей useEffect

Здесь в хуке useEffect вторым параметром является [message]. Этот эффект зависит от состояния сообщения. Поэтому, если это состояние изменится, нам нужно снова запустить эффект.

7. useEffect и useMemo

В useEffect React.useEffect срабатывает каждый раз при любых изменениях в зависимостях.

Но в UseMemo React.useMemo не срабатывает каждый раз при любых изменениях в зависимостях. Запоминаемая функция сначала проверит, изменились ли зависимости с момента последнего рендеринга. Если это так, он выполняет функцию и возвращает результат. Если false, он просто возвращает кешированный результат последнего выполнения.

8. useMemo или useCallback

useCallback почти такой же, как useMemo, но для функций. На самом деле useCallback(fn, deps) эквивалентно useMemo(() => fn, deps). Предполагается, что useCallback ускоряет работу приложения при использовании большого количества функций обратного вызова, не переопределяя их, пока не изменятся зависимости.

9. Как работает повторный рендеринг в React

В React при повторном рендеринге родительского компонента в результате повторно рендерятся все его дочерние компоненты (если для дочерних компонентов не реализована оптимизация). Повторный рендеринг компонента может быть запущен несколькими способами, парой из которых являются:

  • Изменение состояния компонента
  • Изменение реквизитов компонента

10. Закрытие

Область видимости определяет доступность переменных в JavaScript. Это может быть функция или область действия блока.

Лексическая область позволяет области действия функции получать доступ к переменным из внешних областей.

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

Замыкания захватывают переменные внутри обработчиков событий, обратных вызовов. Они используются в функциональном программировании.