Запись в блоге JavaScript 411 2

В моем классе Javascript на этой неделе я научился создавать компоненты React и получать к ним доступ из разных элементов каталога. Например, в одном проекте, где мы использовали fetch(), я создал компонент вне файла App.js под названием Beeritem, который я экспортировал и импортировал в свой основной файл App.js. Этот файл позволил мне установить состояние Beeritem и назначить ‘props’ для передачи и использования в моем файле App.js.

Разница между состоянием и реквизитами заключается в том, что внутри компонента реквизиты — это переменные, унаследованные от его родительского компонента. Состояние может варьироваться, но оно напрямую инициализируется и управляется компонентом. Props может инициализировать состояние.

ReactDOM — это библиотека, которая позволяет React.js использовать виртуальный DOM для хранения изменений рендеринга в компонентах App.js и действует как арбитр, который уведомляет DOM о том, какие компоненты были изменены, чтобы он мог обновлять себя наиболее эффективным образом. Это означает, что если мы изменим только один элемент в одном компоненте, DOM будет отображать изменения только в этом одном элементе страницы (приложение).

React.createClass — это метод, который действует аналогично расширению React.Component. Они оба создают компоненты, которые можно использовать в React. Расширяет React.Component, позволяя использовать стрелочные функции ES 6. Это помогает привязать this к элементу, чтобы его можно было использовать вне его области действия в файле React.

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

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

export const connection = await createConnection();
// server.mjs
import { connection } from './db.mjs';
server.start();