React Hooks (ui.dev)

Смысл маркетинга хуков состоит в том, что они позволяют добавлять состояние и другие функции React к функциональным компонентам. На самом деле, они гораздо больше, чем это. В этом курсе вы начнете с изучения ментальной модели Хуков. Как только вы это поймете, вы изучите каждый крючок в отдельности, а затем практическую, реальную проблему, над которой нужно работать. Вы научитесь брать существующее приложение React и реорганизовывать его для использования Hooks.

Что вы узнаете

Почему React Hooks?

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

Мышление в Hooks

Хуки имеют другую ментальную модель, нежели классовые компоненты. Недостаточно просто запомнить различные API-интерфейсы Hook, нужно научиться мыслить с помощью Hooks.

useState

Хук useState позволяет добавлять состояние к функциональным компонентам. Вы узнаете о его API, а также о том, как использовать его в различных сценариях, которые вы бы увидели при создании реального приложения.

Closures

Closures? Разве это не JavaScript? Это так и есть, и хуки сильно зависят от них. Вы узнаете все о контексте выполнения JavaScript и о том, когда создаются замыкания, которые значительно облегчат изучение хуков.

useEffect

Хуки useEffect позволяют добавлять побочные эффекты к функциональным компонентам. Вы узнаете не только о том, что такое «побочный эффект», но также и о множестве (иногда хитрых) реальных сценариев использования для их решения.

Правила Хуков

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

Пользовательские Хуки

Исторически, чтобы разделить невизуальную логику, вы должны были полагаться на запутанные шаблоны, такие как компоненты высшего порядка или подпорки рендеринга. Вы узнаете, как вы можете сделать то же самое (но гораздо проще), создавая свои собственные пользовательские хуки.

useReducer

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

useRef

Иногда вам нужно значение, которое будет сохраняться при рендеринге, но не будет вызывать повторный рендеринг. Вы узнаете, как создать это с помощью хуков useState, затем вы узнаете менее хакерский способ с Hookie useRef.

useContext

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

useCallback

useCallback дает вам ссылочное равенство между рендерами для функций. Что это значит? Вы узнаете.

useMemo

useMemo дает вам ссылочное равенство между рендерами для значений. Что это значит? Вы узнаете.

useLayoutEffect

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

Рефакторинг существующих приложений React

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

https://coursehunter-club.net/t/react-hooks-tm

https://coursehunter-club.net/t/react-hooks-tm-2