Пользовательские реактивные крюки: userboolean.

React Cloots изначально позволяют вам «подключить к» функциям состояния реагирования и функции жизненного цикла, например, мы использовали с ComponentDidmount или ComponentWillunmount Методы при использовании классовых компонентов. Что мы найдем в этой статье, мы можем реализовать наши собственные пользовательские крючки, используя несколько примитивовных крючков React предоставляет нам, как Уместите и Useffect Отказ Таким образом, вы можете значительно снизить когнитивную сложность ваших компонентов, переходя какую-то логику в функции, которые вы сможете повторно использовать в любом месте других компонентов ваших приложений React. Ваш код будет выглядеть чище, и вы следите за одним принципом ответственности (SRP), в котором говорится, что каждый класс или функция (или, в нашем случае, компонент) должен иметь ответственность за одну часть функциональности программы, и она должна инкапсулировать эту часть.

Достаточно разговоров, давайте приступим к работе и внедрению нашего первого пользовательского крючка: Usboolean Действительно 😎

Мотивация

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

const Spoil = ({ content }) => {
  const [showSpoil, setShowSpoil] = useState(false);

  return (
    
      
      {showSpoil && {content}}
    
  );
};

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

Здесь компонент настолько прост, что очень легко читать, но мы могли бы улучшить его читаемость, извлекая кнопку onclick Слушатель до отдельной функции:

const Spoil = ({ content }) => {
  const [showSpoil, setShowSpoil] = useState(false);

  const toggle = () => setShowSpoil((visible) => !visible)

  return (
    
      
      {showSpoil && {content}}
    
  );
};

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

На самом деле, наш компонент может быть дополнительно упрощен, если у нас был Usboolean Крюк, что мы бы использовали так:

const Spoil = ({ content }) => {
  const [showSpoil, setShowSpoil] = useBoolean(false);

  return (
    
      
      {showSpoil && {content}}
    
  );
};

Видеть? Мы не добавили какую-либо дополнительную функцию, а onclick Слушатель легче читать. Теперь давайте перейдем в реализацию этого простого крючка, будем ли мы? 😎

Выполнение

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

const useBoolean = (initialValue) => {
    const [value, setValue] = useState(initialValue)

    return [value, setValue]
}

⚠️ Будьте осторожны: вы сможете использовать только Usboolean Функция (или я должен сказать крючок) в реактивных компонентах, как он использует Уместите крюк.

До сих пор мы только что создали псевдоним для Уместите крюк.

Не очень полезно … 😅

Интересная часть приходит сейчас: вместо того, чтобы иметь SetValue Функция в массиве возврата мы будем использовать объект, который будет содержать 3 метода:

Переключить () Чтобы переключить ценность
на () Чтобы установить значение для истинный
OFF () Чтобы установить значение для ложный

Наш крючок теперь выглядит так:

const useBoolean = (initialValue) => {
    const [value, setValue] = useState(initialValue)

    const updateValue = useRef({
        toggle: () => setValue(oldValue => !oldValue),
        on: () => setValue(true),
        off: () => setValue(false)
    })

    return [value, updateValue.current]
}

И вот это, вы только что создали свой первый пользовательский крюк, поздравляю! 🥳.

использование

const Articles = () => {
  const [articles, setArticles] = useState([])
    const [isLoading, setIsLoading] = useBoolean(false)
    const [isError, setIsError] = useBoolean(false)

    useEffect(() => {
        setIsLoading.on()
        fetch(...)
            .then(res => res.json())
            .then(setArticles)
            .catch(setIsError.on)
            .finally(setIsLoading.off)
  }, [])

    return ...
}

⚠️ Будьте осторожны: вы не можете использовать setisloading (true) Как мы не экспортируем функцию больше, кроме объекта.

Вывод

Спасибо, что читали меня. Я надеюсь, что вам понравилось эту статью, и если это так, не стесняйтесь взглянуть на мои другие. Кроме того, не стесняйтесь публиковать некоторые комментарии, если у вас есть какие-либо вопросы, или если вы просто хотите сказать «Привет». 😎

Поддержите меня

Если вы хотите поддержать меня, вы можете купить мне кофе со следующей ссылкой (я, вероятно, превратимся в этот кофе в новый пользовательский крючок … ☕)

использованная литература

https://reactjs.org/docs/hooks-overview.html

https://en.wikipedia.org/wiki/Single-responsibility_principle

Оригинал: “https://dev.to/iamludal/react-custom-hooks-useboolean-3m6c”