Рубрики
Без рубрики

Самые удивительные крючки для вашего проекта React

React.js в настоящее время является одним из самых популярных библиотек JavaScript для интерфейсных разработчиков. Реагируйте … с меткой реагирования, крючки, WebDev, JavaScript.

React.js в настоящее время является одним из самых популярных библиотек JavaScript для интерфейсных разработчиков.

Реагируйте действительно изменили способ создания одностраничных приложений (SPA). Одной из его самых больших функций является крючки, вводимые в React 16.8, и эта новая функция позволяет использовать функциональные компоненты вместо классов компонентов, обрабатывающих состояние с крючками.

Реагирование предлагает способы реализации наших собственных пользовательских крючков. Некоторые потрясающие пользовательские крючки:

UseTimeout Touch

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

Код

import { useEffect, useRef } from 'react';

const useTimeout = (callback, timeout) => {
  const savedCallback = useRef(null);
  savedCallback.current = callback;

  useEffect(
    () => {
      savedCallback.current = callback;
    },
    [callback]
  );

  useEffect(
    () => {
      if (timeout) {
        const timeoutId = setTimeout(() => {
          savedCallback.current();
        }, timeout);
        return () => clearTimeout(timeoutId)
      }
    },
    [timeout]
  )
}

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

import { useState } from 'react';

const ExampleComponent = () => {
  const [message, setMessage] = useState('');
  useTimeout(() => {
    setMessage('Hello World');
  }, 7500);

  return (
{message}
);
}

Примеренный крюк

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

Код

import { useEffect, useRef } from 'react';

const usePrevious = (state) =>  {
  const ref = useRef();

  useEffect(() => {
    ref.current = state;
  });

  return ref.current;
}

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

import { useState } from 'react';

const ExampleComponent = () => {
  const [counter, setCounter] = useState(0);
  const previousCounter = usePrevious(counter);

  return (
    <>
      
Counter: {counter}

      
Previous Counter: {previousCounter}

      
    
  );
}

Приспособленный крючок

С помощью этого пользовательского крючка мы можем реализовать JavaScript Setinterval с использованием декларативного подхода.

Код

import { useEffect, useRef } from 'react';

const useInterval = (callback, delay) => {
  const savedCallback = useRef(null);
  savedCallback.current = callback;

  useEffect(
    () => {
      savedCallback.current = callback;
    },
    [callback]
  );

  useEffect(
    () => {
      if (delay) {
        const intervalId = setInterval(() => {
          savedCallback.current();
        }, delay);
        return () => clearInterval(intervalId)
      }
    },
    [delay]
  )
}

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

import { useState } from 'react';

const ExampleComponent = () => {
  const [seconds, setSeconds] = useState(0);
  useInterval(() => {
    setSeconds(seconds + 1);
  }, 1000);

  return 
 Seconds passed: {seconds}
;
}

usefetch крюк

Крюк UseFotch можно использовать для реализации приема в декларативный способ. Также этот пользовательский крючок помогает с поведением как загрузка и ошибки.

Код

import { useState, useEffect } from 'react';

const useFetch = (initialUrl, initialOptions = {}) => {
  const [url, setUrl] = useState(initialUrl);
  const [options, setOptions] = useState(initialOptions);
  const [data, setData] = useState(null);
  const [error, setError] = useState(null);
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    const fetchData = async() => {
      try {
        setIsLoading(true);
        const response = await fetch(url, options);
        const json = await response.json();
        setData(json);
      } catch (err) {
        setError(err);
      } finally {
        setIsLoading(false);
      }
    }
    fetchData();
  }, [url, options]);

  return ({data, error, isLoading, setUrl, setOptions});
};

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

const URL = 'https://jsonplaceholder.typicode.com/todos';

const ExampleComponent = () {
  const { data, error, isLoading } = useFetch(URL);

  if(isLoading) {
    return (
Loading...
)
  }

  if (error) {
    return 
{error?.message}
;
  }

  const renderItem = ({id, title})=> (
    

      
{id} - {title}

    

  );

  return data.map(renderItem);
}

Крюк Usecontrouctor

Крюк USEControuctor может использоваться для реализации того же поведения в качестве компонентов класса.

Код

import React from 'react';

export const useConstructor = (callBack = () => {}) => {
  const [hasBeenCalled, setHasBeenCalled] = React.useState(false);
  if (hasBeenCalled) return;
  callBack();
  setHasBeenCalled(true);
};

Я буду обновлять сообщение с новыми потрясающими крючками

Оригинал: “https://dev.to/brayanarrieta/most-awesome-hooks-for-your-react-project-4dcp”

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