Я создаю приложение на React и веду блог для него. В этом блоге я рассказываю о том, что такое React, чем он отличается от традиционной разработки, особенности React, наличие расширений для React и что я рекомендую для его изучения.
Что такое React?
React — это библиотека JavaScript для создания пользовательских интерфейсов. Он направлен в первую очередь на скорость, простоту и масштабируемость. Проще говоря, React можно использовать в качестве представления в архитектуре Model View Controller. Это дает нам возможность повторно использовать компонент пользовательского интерфейса при разработке приложений.
Чем это отличается от традиционной веб-разработки?
Традиционная веб-разработка использовала императивный подход к разработке приложений. Это означает, что мы сообщаем браузеру, как обновить что-либо в Интернете, посредством пошагового кода, что делает разработку приложений очень утомительной задачей. В то время как React использует декларативный подход.
В традиционных представлениях веб-разработки, используемых для рендеринга, как показано ниже,
‹заголовок›
‹класс div="имя"›
Не вошел
‹/дел›
‹/заголовок›
$.post('/login', учетные данные, функция (пользователь) {
// Модифицируем DOM
$(‘header .name’).текст(user.name);
});
В приведенном ниже коде та же логика, которую мы реализуем, используя декларативный подход в React:
визуализация: функция () {
константное имя = это.состояние.имя;
возврат (‹заголовок›
{ название ? имя : ‹span›Не вошел в систему‹/span› }
‹/заголовок›);
}
Вышеуказанная функция рендеринга находится в коде JSX, что означает расширение синтаксиса JavaScript. Мы можем сразу сказать, как этот компонент будет отображаться. Если мы знаем состояние (см. Документацию ReactJS), мы знаем отрендеренный вывод. Нам не нужно отслеживать ход выполнения программы. Мы объявляем, что нам нужен заголовок с именем или сообщением. Мы не говорим компьютеру, как это сделать, как в примере с jQuery. В jQuery мы изменяем DOM в несколько этапов и не можем понять, как это получилось.
Различные функции React
Зацепки жизненного цикла React
React предоставляет хуки жизненного цикла, такие как монтирование, обновление и размонтирование для компонента, которые повышают производительность компонента.
Односторонний поток данных с реквизитами
React использует реквизиты (свойства) для отображения любого изменения компонента в DOM, мы можем передать реквизиты в качестве аргумента дочернему компоненту из родительского компонента.
Двусторонний поток данных с состояниями
Состояние управляет единым источником достоверности данных. Состояние может быть передано ребенку с помощью реквизита
класс ParentComponent расширяет React.Component {
состояние = {цвет: «красный»};
оказывать() {
возвращение (
‹ChildComponent color={this.state.color} /›
);
}
}
Виртуальный DOM
Алгоритм сравнения обеспечивает возможность повторного рендеринга только измененных элементов в компоненте.
JSX
Расширение синтаксиса JavaScript представляет собой композицию HTML и JavaScript. Используя JSX, мы можем изменять элементы HTML с помощью JavaScript.
Условные операторы
Мы можем проверить условия в элементах HTML с помощью JSX и получить желаемый результат, как показано ниже.
класс Приложение расширяет React.Component {
оказывать() {
const я = 1;
возврат (
‹див›
‹h1›{ я === 1 ? «истина» : «ложь» }‹/h1›
‹/дел›
);
}
}
Дополнения расширения/масштабируемости
React не пытается предоставить полную «инфраструктуру приложения». Он нацелен непосредственно на создание пользовательских интерфейсов и поэтому не включает многие инструменты, которые некоторые разработчики считают необходимыми для создания приложения.
Поэтому мы используем библиотеки для разработки приложений с полным стеком, такие как Redux, React Router, NodeJS, Express и т. д.
React используется Instagram, Facebook, Netflix и многими крупными компаниями для рендеринга пользовательского интерфейса.
Что я рекомендую изучать React?
