Автор статьи, перевод которой мы сегодня публикуем, говорит, что в компании commercetools приняли на вооружение хуки React в начале 2019 года — в момент их появления в React 16.8.0. С тех пор программисты компании постоянно перерабатывают свой код, переводя его на хуки. Хуки React позволяют, не используя классы, работать с состоянием компонентов и пользоваться другими возможностями React. Используя хуки, можно, работая с функциональными компонентами, «подключаться» к событиям жизненного цикла компонентов и реагировать на изменения их состояния.
Рубрика «ReactJS» - 8
5 практических рекомендаций по использованию React-хуков в продакшне
2020-04-02 в 9:00, admin, рубрики: javascript, React, ReactJS, Блог компании RUVDS.com, разработка, Разработка веб-сайтов
Роль самоизоляции и мытья рук
2020-04-02 в 6:51, admin, рубрики: COVID-19, javascript, map, MapBox, React, ReactJS, Здоровье гика, коронавирусМногие из нас уже несколько недель сидят дома и в голове все чаще звучит мысль — а нужно ли? Может быть власти и медиа сильно преувеличивают — если что и было, то уже закончилось, можно возвращаться в привычный ритм. В этой статье я дам вам возможность самим ответить на этот вопрос. Пользуясь случаем, я разработал приложение наподобие Plague Inc, только без игровой механики, но с возможностью точечной настройки параметров — Pandemic simulator. В статье я покажу, как отличается характер пандемии в зависимости от нас с вами — сидим ли мы дома и моем ли руки.
Вот так изменится население США в случае если у COVID-19 будет 90% летальность.
Адаптивный или отзывчивый? Разбираем структуру React-компонентов
2020-03-23 в 7:53, admin, рубрики: React, ReactJS, Блог компании Юла, интерфейсы
В этой статье мы разберёмся, в чем сложность написания адаптивных компонентов, поговорим о code-splitting-е, рассмотрим несколько способов организации структуры кода, оценим их достоинства и недостатки и попытаемся выбрать лучший из них (но это не точно).
Читать полностью »
ReactJS. Warning: Can’t perform a React state update on an unmounted component. This is a no-op, but it indicates a memo
2020-03-22 в 3:13, admin, рубрики: fetch, javascript, ReactJSДоброго времени суток!
Все reactjs разработчики, кто имеет дело с интерактивностью между бэком и фронтом рано или поздно встречаются, или встречались, или встретятся со следующей ошибкой:
Если дословно, то получится так:
Предупреждение. Невозможно выполнить обновление состояния React для неустановленного компонента. Это не операция, но она указывает на утечку памяти в вашем приложении. Чтобы исправить, отмените все подписки и асинхронные задачи в функции очистки useEffect.
На самом деле все достаточно просто, нужно всего лишь обратить внимание на следующие словосочетания:
- Невозможно выполнить обновление состояния
- неустановленного компонента;
- отмените все подписки и асинхронные задачи
- очистки useEffect
В основе хуки. GO в под кат!
Читать полностью »
Масштабирование Redux-приложения с помощью ducks
2020-03-18 в 9:39, admin, рубрики: javascript, react.js, ReactJS, Блог компании OTUS. Онлайн-образование, ПрограммированиеВ преддверии старта курса «React.js разработчик» подготовили перевод полезного материала.
Как масштабируется front-end вашего приложения? Как сделать так, чтобы ваш код можно было поддерживать полгода спустя?
В 2015 году Redux штурмом взял мир front-end разработки и зарекомендовал себя как стандарт выйдя за рамки React.
В компании, в которой я работаю, недавно закончился рефакторинг большой кодовой базы на React, где мы внедрили redux вместо reflux.
Нам пришлось пойти на этот шаг, потому что движение вперед оказалось невозможным без хорошо структурированного приложения и четкого набора правил.
Кодовой базе уже больше двух лет и reflux был в ней с самого начала. Нам пришлось менять код, сильно завязанный на компонентах React, который никто не трогал больше года.
Опираясь опыт от проделанной работы, я создал этот репозиторий, который поможет объяснить наш подход к организации кода на redux.Читать полностью »
Война с тормозами. Оптимизация количества рендеров компонентов в React Native
2020-03-16 в 7:14, admin, рубрики: mobile, React, ReactJS, render, разработка мобильных приложенийПривет! Меня зовут Камо Сперцян, я занимаюсь React Native разработкой в Profi.ru. Если вы решили воспользоваться технологией React Native для быстрой доставки продуктовых фич и сосредоточились на скорости разработки, то, скорее всего, столкнётесь с проблемами производительности. По крайней мере так случилось с нами. Через полгода активной разработки производительность нашего приложения упала ниже критического уровня — всё дико тормозило. Поэтому мы взялись за оптимизацию — убирали все «тормоза» во время запуска, переходов между экранами, отрисовки экранов, реакций на действия пользователя. В результате за три месяца довели пользовательский опыт до нативного уровня. В этой статье хочу рассказать о том, как мы оптимизировали приложение на React Native и решали проблему многократных ререндеров компонентов.
Я собрал рекомендации, которые помогут минимизировать количество бессмысленных перерисовок компонентов. Для наглядности в примерах сравниваю «плохую» и «хорошую» реализации. Статья будет полезна тем, кто уже столкнулся с низкой производительностью приложения, и тем, кто не хочет допустить этого в будущем.
Мы используем React Native в паре с Redux. Часть советов связана с этой библиотекой. Также в примере я использую библиотеку Redux-thunk — для имитации работы с сетью.
Читать полностью »
Эксперимент: Redux от мира ООП
2020-03-15 в 9:22, admin, рубрики: flux, javascript, mobx, React, ReactJS, redux, vuejs, vuexВ интернетах давно ведётся священная война между адептами Функционального Программирования и ООП, Redux и MobX, React и Angular. Многие годы я обходил её стороной, но теперь эта тема коснулась и меня.
Reactjs, Material-UI with JSS. Краткий гайд
2020-03-15 в 3:59, admin, рубрики: css, javascript, jss, material-ui, ReactJSДоброго времени суток!
Итак, material-ui — reactJS's фрэймворк, предоставляющий готовые google решения для быстрой и довольно простой web разработки.
Material-UI достаточно крупная библиотека, где ключевой частью react компонентов и стилизации является @material-ui/core (целью ее использования должен быть немаленький проект).
Этот туториал не включает в себя продвинутое использование material-ui. Это мини мануал по стилизации компонентов.
Использовать material компоненты действительно не сложно, но есть нюансы использования стилизации. Об этом собственно и пойдет речь.
Рассмотрим следующее:
- JSS и немного о синтаксисе;
- Стилизация классовых react, material компонентов;
- Стилизация функциональных с использованием хуков react, material компонентов;
- Стилизация посредством styledComponent react, material компонентов;
- Провайдер theme;
- Переопределение material компонентов;
GO под кат!
Debouncing с помощью React Hooks
2020-03-13 в 13:52, admin, рубрики: hooks, javascript, React, ReactJS, переводСегодня я собираюсь показать вам, как создать хук useDebounce, который позволяет супер-просто отложить вызовы АПИ, что бы они не происходили слишком часто.
Так же я создал демо, которое использует наш хук. Оно ищет по АПИ Marvel Comics и хук useDebounce позволяет избежать обращений к серверу на каждое нажатие клавиши.
8 плюсов Flutter по сравнению с React Native
2020-03-13 в 11:40, admin, рубрики: flutter, i-neti, Neti, react native, ReactJS, Аналитика мобильных приложений, мобильная разработка, разработка мобильных приложений, Тестирование мобильных приложенийМобильная разработка все чаще опирается не на нативную разработку, а на использование фреймворков, помогающих создавать приложения сразу для нескольких платформ. Сегодня мне хочется сказать несколько слов о Flutter, который постепенно начинает отвоевывать рынок у React Native. Подробности — под катом.
