Привет! Я нахожусь в миссии, чтобы сделать 100 проектов React.js, заканчивающиеся 31 мая. Пожалуйста, следуйте My Dev.to Profile или моим Твиттер Для обновлений и не стесняйтесь обратиться, если у вас есть вопросы. Спасибо за поддержку!
Ссылка на сегодняшнее развернутое приложение: Ссылка Ссылка на репо: GitHub
Сегодня 3 -й день импровизированной серии на React Hooks. Сегодня я узнал, как строительство нестандартного крючка может заменить компоненты более высокого порядка в приложениях React. Это было на самом деле огромное облегчение для меня. Далее в проекте № 18 Tinder более высокого порядка я строил вещи с компонентами более высокого порядка, и если вы – JavaScript Pro, они довольно интуитивно понятны, но они большие и неуклюжие, а иногда неясно, что в них происходит, в моем мнение.
В рамках общего общего движения React по охвату функциональных компонентов мы выбросили компоненты более высокого порядка и заменили их на крючки.
Взгляните на этот компонент высшего порядка из проекта № 18:
import React from 'react'; export default function TinderCard(component) { return function (props) { const C = component; return (); }; }
Вышеуказанная функция довольно понятна, но может быть лучше. На первый взгляд, если бы вы не знали, что такое HOCS, вы, вероятно, могли бы прочлить, что в другой функции есть функция, и вы передаете компонент через реквизит во внутренний компонент и завершаете пропущенный компонент. Это странно, хотя и не следует за шаблоном, как вы используете, действительно где -то еще в React.
Если бы мы переработали это в пользовательском крючке, где обе функции и переменные могут быть переданы непосредственно к другой функции, мы можем полностью пропустить прохождение вещей через реквизит. В этом простом примере это не совсем ясно, потому что мы просто передаем JSX, но компоненты более высокого порядка были де-факто реагируют способ передать вещи компоненту.
Теперь посмотрите на пользовательский крючок, который мы создаем, чтобы поделиться функцией Toggler и переменной в сегодняшнем проекте:
import {useState} from 'react' function useToggler() { const [isDefault,setIsOn] = useState(true) function toggle() { setIsOn(prevState => prevState === true ? false : true) } return [isDefault,toggle] } export default useToggler
Во -первых, нам не нужно импортировать всю библиотеку React, потому что нам не нужно писать какой -либо JSX в функции, мы просто импортируем USESTATE
Чтобы отслеживать логическую переменную. Это соглашение, чтобы назвать крюк, начиная со слова использовать-
Итак, здесь мы называем наш крюк USETOGGLER
Анкет Внутри Toggler мы создаем функцию, которую мы можем поделиться везде, где мы хотим использовать этот крюк.
Одним из основных преимуществ крючков является то, что они так используются. Скажем, например, у вас есть куча различных служб хронометража, например, на заказ может поделиться функциями среди всех этих услуг. Вы можете вернуть данные из крючка в объекте, но тогда вы не сможете переименовать свойства. Если вы возвращаете данные в качестве массива, как я здесь сделал, вы можете импортировать одни и те же данные и назвать их все, что вы хотите.
Вот фрагмент соответствующего кода из App.js
компонент, где мы импортируем USETOGGLER
Пользовательский крючок и используйте его дважды, для двух отдельных переключающих элементов (помните, что я упоминал, что я упоминал?). Я покажу вам, где мы импортируем крюк, и настроим его для использования в обоих местах:
import React from 'react' import Navbar from './Navbar' import useToggler from './useToggler' function App() { const [darkIsOff,toggleDarkIsOff] = useToggler(); const [isJames,toggleIsJames] = useToggler(); ...
Вы можете увидеть здесь, что мы называем USETOGGLER
Дважды зацепите один раз для каждого куска приложения, где мы хотим его использовать. Поскольку мы вернули данные из крючка в массиве, мы можем переименовать возвращенные элементы для того, что имеет смысл в каждом месте приложения. Вот первая половина Приложение
Компонент, где вы можете видеть, мы используем Darkisoff
Чтобы определить, включен ли темный режим или нет, и использование общей функции Toggler для переключения состояния True или False с кнопкой:
...{/* navbar with title */}{/* dark / light mode toggler */} ...Toggle Dark Mode
И ниже вторая часть Приложение
Компонент, который использует ту же логическую переменную и ту же функцию Toggler, но и исходит от пользовательского крючка, который мы звонили отдельно и переименованы для этого фрагмента кода. Переменная состояния названа Isjames
Здесь и функция Toggleisjames
:
{/* name toggler */}{`My name is${isJames ? "" : " not"} James Hubert`}
Таким образом, даже если это простой пример, вы можете сразу же увидеть, что, написав пользовательские крючки, которые являются просто возникающим шаблоном React, вы можете создавать широко использование функций, переменных и даже JSX для использования в любом месте вашего приложения. Самое главное, это означает, что вам никогда не придется снова создавать компонент более высокого порядка (если вы не хотите), что я нахожу утешительным:)
Если вам нравятся такие проекты и вы хотите оставаться в курсе большего, проверьте мой Twitter @jwhubert91 , Я следую назад! Увидимся завтра для другого проекта, на этот раз на пользовательских крючках.
Оригинал: “https://dev.to/jwhubert91/project-63-of-100-reusable-toggler-with-custom-react-hooks-4lo5”