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 обновлять только необходимые элементы, а не повторно отображать весь список, когда что-то изменится. Это огромное улучшение производительности для большого количества динамически созданных элементов.

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

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

FullStack-Мастер

FullStack-Мастер. Разработка CRM-системы на Node.js, Express, Angular 6

Научиться

Метки:

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

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

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree