Создание пользовательского крючка в React

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

Есть много причин, по которым вы хотели бы создать свой собственный крючок, но конечная цель пользовательских крючков-повторное использование любой логики, связанной с крюком по всему вашему приложению. React – это все о возможности повторного использования, как мы все знаем.

Прежде чем продолжить, давайте вернемся к началу этой серии, где мы говорили о правилах крючков

Каковы правила использования крючков

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

React имеет Eslint-Plugin Это обеспечивает соблюдение этих правил.

Я думаю, что лучше добавить этот последний, к этому относится при создании пользовательского крючка.

Всегда префиксу свое пользовательское имя крюка с Используйте Таким образом, этот компилятор React всегда будет проверять, были ли применены правила крючков.

Позвольте нам создать наш собственный крючок!

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

Сначала мы создадим файл с именем useWindowsize.js

import { useEffect, useState, useMemo, useCallback } from 'react';
// We can react hooks in our custom hook

const isWindowType = typeof window === 'object';
const useWindowSize = () => {
    const [isClient] = useState(() => isWindowType)

    const getSize = useMemo(
        () => ({
            height: isClient ? window.innerHeight : null,
            width: isClient ? window.innerWidth : null,
        }), [isClient]
    );

    // useMemo because it could cause unnecessary rerender

    const [windowSize, setWindowSize] = useState(getSize);

    const handleResize = useCallback(() => {
        return setWindowSize(getSize);
    },[getSize])

    useEffect(() => {
        if (isClient) {
            window.addEventListener('resize', handleResize);
        }
        return () => window.removeEventListener('resize', handleResize);
    }, []);

    return windowSize;
};

export default useWindowSize;

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

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

Использование настраиваемого крючка

Мы используем пользовательский крючок так же, как и другие крючки:

import useWindowSize from "./useWindowSize";
// import the hook

export default function App() {
  const { width } = useWindowSize();
  // Use it like you would use a react hook
  return (
    
      {width < 500 ? (
        It's a small screen
      ) : (
        It's not a small screen
      )}
    
  );
}

Поздравляю! Вы только что создали пользовательский крюк в React. Теперь, когда мы закончили с этой статьей, как вы можете ввести то, что мы научились в действие? Давай, исследуй и придумай что -нибудь. Не забывайте, что вам разрешено делать ошибки, и это совершенно нормально, чтобы получить ошибки.

Эта статья помогла вам в любом случае? Если это дало мне нравится и следуйте за мной за большим количеством такого контента. Если у вас есть какие -либо вопросы или комментарии, опубликуйте их в разделе комментариев ниже. Большое спасибо за чтение. Продолжайте быть потрясающим и не забудьте быть в безопасности там.

Оригинал: “https://dev.to/ilizette/creating-a-custom-hook-in-react-lec”

Каковы правила использования крючков

Позвольте нам создать наш собственный крючок!

Использование настраиваемого крючка

Читайте ещё по теме: