ReactJS предлагает изящные решения ряда наиболее серьезных проблем интерфейсного программирования. Это быстрый, масштабируемый, гибкий, мощный продукт, в котором активно растет сообщество разработчиков. Сейчас самое лучшее время, чтобы познакомиться с React.

React Virtual DOM

Если вы используете React или изучаете React, вы, должно быть, слышали термин «виртуальный DOM». Что такое виртуальная модель DOM и почему ее использует React?

Виртуальный DOM

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

Что ж, вы можете спросить: «Разве виртуальный DOM не выполняет то же самое, что и реальный DOM, это звучит как двойная работа?» Как это может быть быстрее, чем просто обновить настоящую DOM? »

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

Как виртуальный DOM работает быстрее?

Когда в пользовательский интерфейс добавляются новые элементы, создается виртуальная модель DOM, представленная в виде дерева. Каждый элемент является узлом в этом дереве. Если состояние любого из этих элементов изменяется, создается новое виртуальное дерево DOM. Затем это дерево сравнивается или «различается» с предыдущим виртуальным деревом DOM.

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

Как React использует виртуальную модель DOM

Теперь, когда вы хорошо понимаете, что такое виртуальная модель DOM и как она может повысить производительность вашего приложения, давайте посмотрим, как React использует виртуальную модель DOM.

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

Реквизиты в JSX

Есть несколько разных способов указать реквизиты в JSX.

Выражения JavaScript как свойства

Вы можете передать любое выражение JavaScript в качестве опоры, заключив его в {}. Например, в этом JSX:

<MyComponent foo={1 + 2 + 3 + 4} />

Для MyComponent значение props.foo будет 10, потому что выражение 1 + 2 + 3 + 4 вычисляется.

Операторы if и for циклы не являются выражениями в JavaScript, поэтому их нельзя напрямую использовать в JSX. Вместо этого вы можете поместить их в окружающий код. Например:

function NumberDescriber(props) {
  let description;
  if (props.number % 2 == 0) {    description = <strong>even</strong>;  } else {    description = <i>odd</i>;  }  return <div>{props.number} is an {description} number</div>;
}

Вы можете узнать больше об условном рендеринге и циклах в соответствующих разделах.

Для свойства по умолчанию установлено значение «True»

Если вы не передаете значение для свойства, по умолчанию используется true. Эти два выражения JSX эквивалентны:

<MyTextBox autocomplete /><MyTextBox autocomplete={true} />

Как правило, мы не рекомендуем не передавать значение для свойства, поскольку его можно спутать с сокращением объекта ES6 {foo}, которое является сокращением от {foo: foo}, а не {foo: true}. Такое поведение существует только для того, чтобы оно соответствовало поведению HTML.

ReactJS - Компоненты

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

Props и PropTypes в React

Props и PropTypes являются важным механизмом для передачи информации между компонентами React, и здесь мы подробно рассмотрим их. Это руководство познакомит вас с подробностями о props, передаче и доступе к props, а также о передаче информации в любой компонент с помощью props. Однако всегда рекомендуется проверять данные, которые мы получаем через реквизиты, с помощью PropTypes. Итак, вы также узнаете, как интегрировать PropTypes в React.

Что такое реквизит

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

Эти данные могут иметь разные формы: числа, строки, массивы, функции, объекты и т. Д. Мы можем передавать свойства любому компоненту, точно так же, как мы можем объявлять атрибуты в любом теге HTML. Взгляните на код ниже:

<PostList posts={postsList} />

В этом фрагменте мы передаем опору с именем posts компоненту с именем PostList. Эта опора имеет значение {postsList}. Давайте разберемся, как получить доступ и передать данные.

Оптимизация производительности в приложениях React

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

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

Однако React может в конечном итоге выполнить повторный рендеринг всех компонентов в дереве DOM, даже если затронуты не все. Это приведет к увеличению времени загрузки, потере времени и даже к потере ресурсов ЦП. Нам нужно предотвратить это. Итак, на этом мы сосредоточим наши усилия по оптимизации.

Состояние в React

До сих пор мы обсуждали только статические компоненты, статические данные которых передаются вниз по дереву компонентов. Часто необходимо создать компонент с отслеживанием состояния, состояние которого меняется с течением времени.

Реагировать на хуки

Хуки - это новая функция, представленная в версии React 16.8. Он позволяет использовать состояние и другие функции React без написания класса. Хуки - это функции, которые «подключаются» к функциям состояния и жизненного цикла React из функциональных компонентов. Это не работает внутри классов.

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

Правила ловушек

Хуки похожи на функции JavaScript, но при их использовании необходимо соблюдать эти два правила. Правило хуков гарантирует, что вся логика с отслеживанием состояния в компоненте видна в его исходном коде. Вот эти правила:

Вызов ловушек только на верхнем уровне

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

Вызов хуков только из функций React

Вы не можете вызывать хуки из обычных функций JavaScript. Вместо этого вы можете вызывать хуки из компонентов функции React. Крючки также можно вызывать из пользовательских хуков.

Спасибо за чтение.