React представил хуки в версии 16.8, и вы можете реализовывать состояния или другие функции в функциональных компонентах без необходимости писать класс благодаря хукам…
Узнайте больше о хуках React: https://reactjs.org/docs/hooks-intro.html
Это здорово… Могу я создать свой собственный крючок?
Хорошие новости. Мой ответ: ДА… вы можете создать свой собственный хук и отделить логику компонента от пользовательского интерфейса…! но не стоит спешить и писать кастомные хуки ни к чему 😉
Давайте подробнее рассмотрим пользовательский хук:
const usePost = (postID) => { const [post, setPost] = useState(null); useEffect(() => { fetch(`${URL}/post/${postID}`) .then(response => response.json()) .then(data => setPost(data)); }, [postID]); return post; }
В приведенном выше коде упоминается пользовательский хук с именем usePost()
, который получает postID
в качестве аргумента и возвращает данные извлеченного сообщения. Фактически, этот пользовательский хук помогает нам отделить сценарий получения нашего основного компонента и создать повторно используемое действие для нашего приложения…
Вы можете создать состояние, чтобы сохранить postID
и передать его для обработки повторной выборки и повторного рендеринга для данных нового поста, учитывая, что useEffect
этот хук получает новые идентификаторы и выполняет повторную выборку для каждого из них.
На самом деле, я упомянул основное преимущество пользовательских хуков, я имею в виду повторный рендеринг для каждого изменения состояния, и вы можете использовать его во многих случаях, и это полезно…
Мы можем создать другие пользовательские хуки с тем же сценарием, что и usePost
, и использовать их везде, где это удобно… но учтите, что вам не нужны повторные рендеры где угодно, и это именно то время, когда вы должны решить, создавать пользовательский хук или простая вспомогательная функция ??!! 🤨
Давайте посмотрим на другой пример:
const useMobile = () => { const [isMobile, setIsMobile] = useState(null); useEffect(() => { let detect = /Android|iPhone|BlackBerry/i.test(navigator.userAgent); setIsMobile(detect); }, []); return isMobile; }
Мы создали собственный хук с именем useMobile
для обнаружения устройства клиента. На самом деле, код работает хорошо, и этот хук возвращает true / false
, когда клиент использует мобильное устройство или нет… но есть проблема 🧐
Но… в чем тут проблема?!
На самом деле, устройство клиента не меняется во время просмотра нашего приложения, и если кто-то начнет с мобильного, это будет мобильное устройство, и они не смогут изменить свое устройство во время обычного просмотра веб-страниц…
Итак, лучше написать простую вспомогательную функцию, чем собственный хук:
function isMobileHelper() { let detect = /Android|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent); return detect; }
Вы знаете, кастомные хуки или другие паттерны действительно потрясающие 👌, но сначала мы должны изучить их точный вариант использования и нигде их не использовать… если мы не будем использовать вещи для места костюма, мы будем ошибаться и привносить сложность…
Удачи.