Как стать автором
Обновить
14
Карма
0
Рейтинг
Иван Ганев @IvanGanev

Веб разработчик

  • Подписчики 24
  • Подписки 16

Как эффективно применять React Context

Разработка веб-сайтов *JavaScript *ReactJS *
Перевод

В статье Как управлять состоянием React приложения без сторонних библиотек, я писал о том как сочетание локального состояния и контекста (React Context) поможет вам упростить управление состоянием при разработке приложения. В этой статье я продолжу эту тему - мы поговорим о методах эффективного использования потребителей контекста (Context Consumer), которые помогут вам избежать ошибок и упростят разработку приложений и/или библиотек.

Рекомендую перед прочтением этой статьи прочитать Как управлять состоянием React приложения без сторонних библиотек. Особенно обратите внимание на рекомендацию о том что не нужно применять контексты для решения всех проблем связанных с передачей состояния. Однако, когда вам все таки понадобиться применять контексты, надеюсь эта статья поможет вам делать это наиболее эффективным образом. Так же помните о том что контексты НЕ обязательно должны быть глобальными, контекст может (и скорее всего, должен) быть частью какой либо ветки в структуре вашего приложения.

Давайте, для начала, создадим файл src/count-context.js и пропишем там наш контекст:

Читать далее
Всего голосов 8: ↑8 и ↓0 +8
Просмотры 25K
Комментарии 21

Как управлять состоянием React приложения без сторонних библиотек

Разработка веб-сайтов *JavaScript *ReactJS *
Перевод
Tutorial

image


Реакт это все что вам нужно для управления состоянием вашего приложения.


Управление состоянием это одна из сложнейших задач при разработки приложения. Вот почему каждый день появляются все новые и новые библиотеки для управления состоянием, их становится все больше и больше, причем многие из них разрабатываются поверх уже существующих решений. В npm вы можете найти сотни "упрощенных Redux" библиотек. Однако, несмотря на то что управлять состоянием сложно, одной из причин того почему так получилось стало именно то что мы слишком переусложняем решение проблемы.


Существует метод управления состоянием который лично я пытаюсь применять еще с тех пор как я начал использовать Реакт. И теперь, после релиза хуков (hooks) и улучшения контекстов (context), этот метод управления состояниями стало очень просто использовать.

Читать дальше →
Всего голосов 9: ↑7 и ↓2 +5
Просмотры 21K
Комментарии 23

Как сделать React приложение быстрее при помощи совместного размещения состояний

Разработка веб-сайтов *JavaScript *ReactJS *
Перевод
Tutorial

В статье речь идет о state colocation, то есть о совместном размещении состояний, этот термин можно было бы еще перевести как стейт колокейшн или стейт колокация.


Одной из основных причин замедления работы React приложения является его глобальное состояние (global state). Я покажу это на примере очень простого приложения, после чего приведу более близкий к реальной жизни пример.


Вот простенькое приложение в котором можно ввести имя для собаки (если окно не работает, вот ссылка):



Если вы поиграете с этим приложением то вскоре обнаружите что оно очень медленно работает. При взаимодействии с любым полем ввода возникают заметные проблемы с производительностью. В такой ситуации можно было бы использовать спасательный круг в виде React.memo и обернуть им все компоненты с медленным рендером. Но давайте попробуем решить эту проблему по другому.


Вот код этого приложения:

Всего голосов 5: ↑5 и ↓0 +5
Просмотры 7.1K
Комментарии 59

Как использовать Инверсию Управления в JavaScript и в Reactjs для упрощения работы с кодом

Разработка веб-сайтов *JavaScript *ReactJS *
Перевод
Tutorial

Как использовать Инверсию Управления в JavaScript и в Reactjs для упрощения работы с кодом


Инверсия Управления это довольно простой для понимания принцип программирования, который, при этом, может заметно улучшить ваш код. В данной статье будет показано как применять Инверсию Управления в JavaScript и в Reactjs.


Если вы уже писали код который используется больше чем в одном месте, то вам знакома такая ситуация:


  1. Вы создаете многократно используемый фрагмент кода (это может быть функция, React компонент, React хук и тд) и делитесь им (для совместной работы или публикуя в опенсорс).
  2. Кто-то обращается к вам с просьбой добавить новый функционал. Ваш код не поддерживает предложенный функционал, но мог бы, если бы вы сделали небольшое изменение.
  3. Вы добавляете новый аргумент/проп/опцию в свой код и в связанную с ним логику для поддержания работы этого нового функционала.
  4. Повторите стадии 2 и 3 несколько раз (или много-много раз).
  5. Теперь ваш повторно используемый код тяжело использовать и поддерживать.

Что именно делает код кошмаром для использования и поддержки? Есть несколько аспектов, которые могут сделать ваш код проблемным:

Читать дальше →
Всего голосов 11: ↑11 и ↓0 +11
Просмотры 9.5K
Комментарии 6

Десять заповедей React компонентов

Разработка веб-сайтов *JavaScript *ReactJS *
Перевод

the-10-component-commandments


Написано Kristofer Selbekk, в сотрудничестве с Caroline Odden. Основано на лекции с таким же названием и с теми же людьми, состоявшейся на встрече ReactJS в Осло в июне 2019 года.

От переводчика — оригинальное название The 10 Component Commandments не упоминает React, но большинство примеров и рекомендаций относятся именно к реакту, к тому же статья выложена под react тэгом и написана реакт разработчиками.


Не легко создавать компоненты которыми будут пользоваться многие разработчики. Вы должны очень тщательно продумать какие пропсы использовать, если эти пропсы будут частью общедоступного API.


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

Читать дальше →
Всего голосов 18: ↑17 и ↓1 +16
Просмотры 9.7K
Комментарии 0

Пишем API для React компонентов, часть 6: создаем связь между компонентами

JavaScript *ReactJS *
Перевод
Tutorial
Пишем API для React компонентов, часть 1: не создавайте конфликтующие пропсы

Пишем API для React компонентов, часть 2: давайте названия поведению, а не способам взаимодействия

Пишем API для React компонентов, часть 3: порядок пропсов важен

Пишем API для React компонентов, часть 4: опасайтесь Апропакалипсиса!

Пишем API для React компонентов, часть 5: просто используйте композицию

Пишем API для React компонентов, часть 6: создаем связь между компонентами

Поговорим о формах.


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


label-on-left


Здесь много чего происходит, взглянем на API

Читать дальше →
Всего голосов 6: ↑6 и ↓0 +6
Просмотры 3.9K
Комментарии 16

Пишем API для React компонентов, часть 5: просто используйте композицию

JavaScript *ReactJS *
Перевод
Tutorial
Пишем API для React компонентов, часть 1: не создавайте конфликтующие пропсы

Пишем API для React компонентов, часть 2: давайте названия поведению, а не способам взаимодействия

Пишем API для React компонентов, часть 3: порядок пропсов важен

Пишем API для React компонентов, часть 4: опасайтесь Апропакалипсиса!

Пишем API для React компонентов, часть 5: просто используйте композицию

Пишем API для React компонентов, часть 6: создаем связь между компонентами

У нас есть компонент значка:


badge-1


<Badge count={12} />

Вы видели их в различных приложениях, они показывают количество объектов в виде числа.


github-1


В cosmos Badge (значок) имеет несколько цветов для каждого конкретного контекста (информация, опасность и т.д.)

Читать дальше →
Всего голосов 14: ↑14 и ↓0 +14
Просмотры 4K
Комментарии 10

Пишем API для React компонентов, часть 4: опасайтесь Апропакалипсиса

JavaScript *ReactJS *
Перевод
Tutorial
Пишем API для React компонентов, часть 1: не создавайте конфликтующие пропсы

Пишем API для React компонентов, часть 2: давайте названия поведению, а не способам взаимодействия

Пишем API для React компонентов, часть 3: порядок пропсов важен

Пишем API для React компонентов, часть 4: опасайтесь Апропакалипсиса!

Пишем API для React компонентов, часть 5: просто используйте композицию

Пишем API для React компонентов, часть 6: создаем связь между компонентами

Поговорим о компоненте Avatar.


avatar-1


<Avatar image="simons-cat.png" />

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

Читать дальше →
Всего голосов 12: ↑10 и ↓2 +8
Просмотры 3.3K
Комментарии 2

Пишем API для React компонентов, часть 3: порядок пропсов важен

JavaScript *ReactJS *
Перевод
Tutorial
Пишем API для React компонентов, часть 1: не создавайте конфликтующие пропсы

Пишем API для React компонентов, часть 2: давайте названия поведению, а не способам взаимодействия

Пишем API для React компонентов, часть 3: порядок пропсов важен

Пишем API для React компонентов, часть 4: опасайтесь Апропакалипсиса!

Пишем API для React компонентов, часть 5: просто используйте композицию

Пишем API для React компонентов, часть 6: создаем связь между компонентами

Давайте начнем с простого компонента React, который отображает тег якоря (anchor tag):


link


<Link href="sid.studio">Click me</Link>

// будет отрендерено в:

<a href="sid.studio" class="link">Click me</a>

Вот как выглядит код компонента:


const Link = props => {
  return (
    <a href={props.href} className="link">
      {props.children}
    </a>
  )
}

Мы также хотим чтобы можно было добавлять к элементу такие html-атрибуты, как id, target, title, data-attr и т.д.

Читать дальше →
Всего голосов 8: ↑7 и ↓1 +6
Просмотры 3.7K
Комментарии 6

Пишем API для React компонентов, часть 2: давайте названия поведению, а не способам взаимодействия

JavaScript *ReactJS *
Перевод
Tutorial
Пишем API для React компонентов, часть 1: не создавайте конфликтующие пропсы

Пишем API для React компонентов, часть 2: давайте названия поведению, а не способам взаимодействия

Пишем API для React компонентов, часть 3: порядок пропсов важен

Пишем API для React компонентов, часть 4: опасайтесь Апропакалипсиса!

Пишем API для React компонентов, часть 5: просто используйте композицию

Пишем API для React компонентов, часть 6: создаем связь между компонентами

У нас есть компонент переключатель — Switch, который принимает проп, давайте пока назовем его something (что-то).


Разработчик, использующий наш компонент, может передать функцию, и мы будем вызывать ее при изменении значения.


switch


<Switch something={fn} />

React дает нам возможность называть проп как нам угодно: handler / clickHandler / onClick / onToggle и т.д


Популярным стало соглашение о том, что название обработчика событий должно начинаться с on, например, onClick. Это связано с тем, что в спецификации HTML есть множество обработчиков, которые уже следуют этому соглашению: onkeydown, onchange, onclick и т.д.


Повторное использование уже существующего соглашения — отличная идея, разработчикам не придется запоминать что-то новое.


Окей, как насчет onClick?

Читать дальше →
Всего голосов 8: ↑8 и ↓0 +8
Просмотры 3.3K
Комментарии 3

Пишем API для React компонентов, часть 1: не создавайте конфликтующие пропсы

JavaScript *ReactJS *
Перевод
Tutorial
Пишем API для React компонентов, часть 1: не создавайте конфликтующие пропсы

Пишем API для React компонентов, часть 2: давайте названия поведению, а не способам взаимодействия

Пишем API для React компонентов, часть 3: порядок пропсов важен

Пишем API для React компонентов, часть 4: опасайтесь Апропакалипсиса!

Пишем API для React компонентов, часть 5: просто используйте композицию

Пишем API для React компонентов, часть 6: создаем связь между компонентами

Этот пост — перевод первой статьи из серии статей Writing good component API, за авторством @Sid. При переводе, в любой непонятной ситуации, я буду руководствоваться официальным переводом документации React JS на русский язык


Когда речь идет о React компонентах, ваши пропсы — это ваш API.


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


Эта серия статей вдохновлена статьями и лекциями от Sebastian Markbåge, Brent Jackson, Jenn Creighton и A. Jesse Jiryu Davis.

После прочтения множества статей + лекций, и после более года проектирования дизайн системы cosmos, я пришел к этим принципам разработки.


Начнем с простого.


У нас есть кнопка:


button-1


<Button>Click me</Button>
Читать дальше →
Всего голосов 11: ↑10 и ↓1 +9
Просмотры 5.6K
Комментарии 3

Информация

В рейтинге
Не участвует
Откуда
Москва, Москва и Московская обл., Россия
Дата рождения
Зарегистрирован
Активность