React JS — Компоненты

React JS — Компоненты

От автора: в этой главе мы рассмотрим, как объединить в React js компоненты, чтобы упростить поддержку приложения. Этот подход позволяет обновлять и изменять компоненты, не затрагивая остальную часть страницы.

Пример без состояния

Наш первый компонент в следующем примере — App. Этот компонент является владельцем Header и Content. Мы создаем Header и Content отдельно и просто добавляем их внутри дерева JSX в наш компонент приложения. Необходимо экспортировать только компонент приложения.

App.jsx

Чтобы иметь возможность отображать это на странице, нам нужно импортировать это в файл main.js и вызвать responseDOM.render(). Мы уже сделали это, установив среду.

main.js

Приведенный выше код дает следующий результат.

Пример с состоянием

В этом примере мы установим состояние для компонента-владельца (App). Компонент Header просто добавлен как в последнем примере, так как он не нуждается в каком-либо состоянии. Вместо тега content мы создаем элементы таблицы и tbody, и будем динамически вставлять TableRow для каждого объекта из массива данных.

Вы можете видеть, что мы используем синтаксис стрелок EcmaScript 2015 (⇒), который выглядит намного чище, чем старый синтаксис JavaScript. Это поможет нам создать элементы с помощью меньшего количества строк кода. Это особенно полезно, когда нам нужно создать список с большим количеством элементов.

App.jsx

main.js

Примечание. Обратите внимание, что мы используем функцию key = {i} внутри map(). Это поможет React обновлять только необходимые элементы, а не повторно отображать весь список, когда что-то изменится. Это огромное улучшение производительности для большого количества динамически созданных элементов.

Источник: //www.tutorialspoint.com/

Редакция: Команда webformyself.

Метки:

Похожие статьи:

Комментарии Вконтакте: