Рубрики
Без рубрики

Мышление в реакции для программистов jQuery

Если вы привыкли писать веб-приложения, используя только jQuery и Manual DOM Manipulation, вот пять советов, которые могут помочь вам подумать о написании компонентов «Реакция».

Автор оригинала: Michelle Tilley.

Реагирование позволяет разработчикам легко создавать компоненты пользовательских интерфейсов легко и быстро использовать декларативную, реактивную модель программирования, не жертвуя производительностью, агрессируя Дом от программиста. Если вы привыкли писать веб-приложения, используя только jQuery и Manual DOM Manipulation, вот пять советов, которые могут помочь вам подумать о написании компонентов «Реакция».

Совет 1: Ваш интерфейс должен быть функцией ваших данных

В типичном приложении jQuery кода манипулирования бизнес-логикой и интерфейсом UI часто смешивается, что приводит к трудному понятному коду и труднодоступным ошибкам. В приложениях Ract, вы должны подумать о вашем интерфейсе в рамках первого дизайна данных; Вопросы, такие как «Какие данные требуются для этого куска UI?» и «Как я могу преобразовать это данные в компоненты DOM?» это ключ.

Учитывая одинаковые данные, компонент React Action должен всегда возвращать тот же выход, что делает компоненты реагирования легко рассуждать и тестировать. Из-за этого, когда вы спрашиваете себя: «Как мне обновить свой интерфейс, чтобы быть определенным образом?» То, что вы должны спрашивать, – это то, какие данные мне нужно изменить, чтобы заставить мои данные трансформации данных до DOM для вывода правильной вещи? »

Совет 2: не трогай этого дома!

Это тесно связано с вышеуказанным точком. Реагистрируйте реагистрацию настоящего Дома от вас от вас, используя «виртуальный дом», который является набором структур данных, которые представляет Что вы хотите, чтобы настоящий Дом был похож. По этой причине вы не должны манипулировать домом самостоятельно; Вместо этого используйте декларативную модель программирования React, чтобы сказать ей то, что вы хотите сделать, и отпустите реагирование позаботиться о манипулировании DOM.

Для простого примера в приложении jQuery вы можете отслеживать логическое состояние и добавить или удалить класс на основе него:

$myBtn = $("

Использование RECT, вы просто отслеживаете данные в внутреннем Государство и скажите отреагировать, что представлять на основе значения:

render: function() {
  var classes = "myButton";
  if (this.state.toggled) classes += " toggled";
  return ;
}

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

Конечно, иногда вы просто не можете реализовать определенную функцию без манипулирования домом вручную; В этих случаях React предоставляет хорошие крючки жизненного цикла, которые вы можете использовать, чтобы убедиться, что вы сможете сделать это, не нарушая цикл рендеринга RACE – но это не должно быть способом по умолчанию для подхода к компонентам строительства!

Совет 3: Инвертировать свой поток данных

Легко соблазнить создать огромное дерево компонентов реагирования с каждым управлением небольшим количеством состояния приложения внутри него. Однако в этом случае он начинает трудно определить, какая часть состояния приложения управляется каким компонентом.

Лучшим подходом состоит в том, чтобы централизовать владение и управление и управление данными в несколько мест (особенно к вершине иерархии компонентов) и передайте эти данные на более низкий уровень без гражданства Компоненты через свойства. Если эти компоненты также должны изменять данные, они должны быть переданы ссылки на функции, которые они могут позвонить, что обновит данные на верхнем уровне. Это имеет дополнительное преимущество изготовления компонентов без гражданства намного проще, и, следовательно, легче понимать, отладки и тестирование.

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

Совет 4: Объятие композиции!

Часто проще всего начать, написав огромный комментарий реагирования, который делает все, что вам нужно, чтобы сделать идею работать. Как только вы сделали это, это хорошая возможность сделать шаг назад и подумать о нарушении функциональности в меньшие подкомпоны. (Для бонусных очков начните думать об этой концепции, прежде чем начать писать свой первый компонент! Вы можете удивить, насколько легко идентифицировать компоненты для вашего приложения, просто глядя на высмевом виде.)

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

Например, посмотрите на следующий фрагмент компонента:

render: function() {
  return (
    
Logged in as {this.props.user.username}. Logout

Your posts:

{this.props.posts.map(this.renderPost)}

Comments:

{this.props.comments.map(this.renderComment)}
); }

Вы можете легко нарушить это в компоненте, который выглядит больше похоже на:

render: function() {
  return (
    
); }

Это может быть разбито еще больше; Например, Loginlogoutbar может использовать компонент под названием UserAwatar Это делает правильный аватар для данного пользователя.

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

Совет 5: остерегайтесь воспоминания

Одной из причин, по которой реагируют такие хорошие характеристики производительности, заключается в том, что он знает, когда данные изменились, и, таким образом, может выяснить, какое минимальное подмножество вашего пользовательского интерфейса является то, что он должен рендер. Однако, поскольку реагирование является JavaScript Framework, это не всегда легкая задача.

Реагируйте изменения данных изменений в звонки на SetState ; Если вы не звоните SetState Чтобы обновить свое состояние, ваш компонент не будет Rerender. По этой причине полезно осторожно связаться с измененными данными. Легко передавать объект к некоторой функции и не осознавать, что он мутирует этот объект напрямую, что может вызвать неожиданное поведение. Кроме того, React Batches UI обновляются асинхронно, когда изменения данных изменяется, поэтому вручную мутирующие данные могут фактически заставить некоторые операции быть потеряны!

Реагистрация обеспечивает Помощники неизменности чтобы помочь с действующим на глубоких поддеревьях и субассорах данных; Вы также можете посмотреть библиотеки как immutable.js которые реализуют надлежащие неизменные данные структуры.