Теги: Компонент
17.09.2021
Небольшое приложение — телефонная книга, не имеет практической ценности, сделано исключительно с целью изучения React. Изначально вообще не планировал публиковать это, но столкнулся с интересным случаем, когда функция-редюсер вызывалась дважды для одного action. Несколько часов не мог понять — что вообще происходит?
15.09.2021
Смотрю сейчас на Udemy видео-курс по хукам — столкнулся с непониманием, зачем хуку useCallback нужны зависимости. Выяснил у преподавателя и решил записать, чтобы не наступать больше на эти грабли. Итак, есть два компонента — Parent и Child, в Parent есть функция, обернутая в useCallback, чтобы избежать лишних рендеров Child.
12.09.2021
Компонент высшего порядка в React это паттерн, используемый для того, чтобы делить функционал между компонентами без повторения кода. Такие компоненты, по факту, не совсем являются компонентами, это скорее функции. Такая функция берёт компонент как аргумент и возвращает новый компонент.
11.09.2021
На концептуальном уровне понять render props очень просто. Давайте забудем на минуту о React и посмотрим на вещи в контексте ванильного JavaScript. У нас есть функция, которая вычисляет сумму двух чисел. Для начала мы просто хотим вывести результат вычисления в консоль.
08.09.2021
Небольшой компонент для ввода pin-кода из четырех цифр. Создает четыре input-поля и отслеживает, чтобы в каждом была только одна цифра. При вводе очередной цифры смещает фокус на следующее поле. Используя клавишу Backspace, можно удалить введенное значение, при втором нажатии — сместить фокус на предыдущее поле.
03.09.2021
Функциональное программирование — это способ программирования, при котором можно передавать функции в качестве параметров другим функциям, а также возвращать их как значения. Так как функции в JavaScript являются объектами, то их можно использовать как значение переменной, передавать и возвращать по ссылке, как и другие переменные.
27.08.2021
Небольшое приложение — каталог рецептов блюд всего мира, не имеет практической ценности, сделано исключительно с целью изучения React. Для оформления используется css-фреймворк materialize.css, http-запросы на получение рецептов отправляются сервису themealdb.com. Итак, разворачиваем react-приложение.
20.08.2021
Небольшое приложение — витрина интернет-магазина + корзина покупателя, не имеет практической ценности, сделано исключительно с целью изучения React. Для оформления используется css-фреймворк materialize.css, http-запросы на получение списка товаров отправляются сервису fortniteapi.io.
10.08.2021
Объект state описывает внутреннее состояние компонента и чем-то похож на объект props. Но если пропс представляет данные, которые приходят извне, состояние определяется внутри и доступно только внутри компонента. Также существенное отличие state от props в том, что значения в state можно и нужно изменять.
09.08.2021
В типичном React-приложении данные передаются сверху вниз с помощью пропсов. Но когда пропсы надо передавать большому количеству потомков, это может быть очень неудобно. Контекст дает возможность делиться данными между компонентами без необходимости явно передавать пропсы через каждый уровень дерева.