Автор оригинала: Ameen Shaikh.
R ECT.JS позволяет вам написать код JSX (JavaScript XML), который аналогичен синтаксису HTML, но не HTML, это просто JavaScript. Это позволяет нам разработать компонентные приложения и, следовательно, мы можем повторно использовать компонент в любой точке этого проекта. Эти приложения являются SPA (приложениями для одной страницы) и реагируют внутри, используют виртуальный DOM, чтобы сделать рендеринг быстрее.
Давайте погрузимся в детали о реагистрации и крючках с жизненным циклом
Что реагирует? Ну, что говорит Google:
Реагировать – это открытый источник, передний конец, библиотека JavaScript для построения пользовательских интерфейсов или компонентов пользовательского интерфейса. Он поддерживается Facebook и сообществом отдельных разработчиков и компаний.
Это круто, не так ли? Давайте погрузимся тогда,
Прежде всего, что такое UI (интерфейс пользователя)? 😕.
Это представление о просмотре веб-приложений, таких как то, что вы видите, когда вы открываете Amazon.com. То, что вы видите, это UI. 😄.
Итак, что вы используете для создания пользовательских и веб-приложений (веб-приложение)? 😕.
Традиционно мы используем HTML, CSS, JavaScript для переднего конца, который содержит пользовательский интерфейс, а также то, что происходит на клике мыши или при нажатии клавиши. Для UI мы используем HTML, CSS и сценарии, такие как когда пользователь нажимает что-то, мы используем JavaScript.
Тогда зачем использовать реагирование? 😖.
Реагируйте, позволяют создавать компоненты, такие как компонент кнопок, входной компонент и т. Д., Через которых мы можем повторно использовать компонент, куда бы мы ни хотели в этом проекте, в отличие от традиционного подхода, где мы должны повторить один и тот же код снова и снова реагировать легкий. Реагирование также быстрее, поскольку он загружает все файлы JS, CSS, изображения только один раз, а затем, когда вы переходите на новую страницу в этом веб-приложении, в отличие от традиционного подхода, он не будет перезагружать все JS, CSS, изображения, файлы HTML. (Мы поговорим об этом более подробно, когда мы посмотрим на React Router).
Хорошо, есть что-то еще, чтобы реагировать?
Да, это больше в магазине для вас. Вы видите, что люди, которые разработали реагирование, добавили две основные функции, которые делают так круче, чем традиционный подход.
- JSX (JavaScript XML)
- Виртуальный домос
JSX (JavaScript XML) Он имеет синтаксис, аналогичный HTML, но это не код HTML. Это JavaScript. 😠 😵.
Все, что вы видите в вышеуказанном коде внутри возврата, является действительным JSX. Выглядит похоже, не так ли?
Помимо нескольких правил, таких как вы не можете использовать класс ключевых слов, это зарезервированное слово, каждый тег должен иметь закрывающий тег, и должен быть только один родительский Div, который стажировку которого содержится другие элементы.
Знает ли браузер JSX-код?
Нет, но мы используем Babel Transpiler для преобразования кода JSX в код JavaScript, а также для преобразования кода JavaScript версии ES5➕ в код ES5, который поддерживается всеми браузерами. Когда вы посмотрите на вышеуказанный код, вы заметите, что div с classname 😕 картой представляет собой родительский элемент, и он содержит другие элементы.
Подождите, что такое классное имя?
Поскольку я говорил о правиле, где он говорит, что вы не можете использовать ключевое слово класса, это потому, что мы используем класс ключевых слов для создания компонента на основе класса. В вышеуказанном патроне кода JSX является компонент. И мы дали ему имя компонента карты, как вы можете увидеть имя функции. Мы можем повторно использовать этот компонент в любом месте в проекте. Примеры будут заголовка или компонентом нижнего колонтитула, которые можно использовать на любой другой странице.
Бонус ✴️ Существует два способа создания реагирования.
- Компонент на основе класса.
- Функциональный компонент.
То, что вы видите выше, является примером функционального компонента. И, на основе классовых компонентов? позволит вам погладить это. Хотя каждый разрабатыватель реагирования использует в настоящее время компонент на основе функционала, поскольку технология меняется быстро на основе классовых компонентов, используются в более старой версии реагирования, поскольку в то время реагируют функциональный компонент не поддерживают состояние только в классе только в классе На базе компонента, но из реакции 16 все изменилось. Итак, лучше знать оба.
Что такое государство?
В Nection State является объектом здесь, мы храним значения свойств, которые принадлежат компоненту. В компоненте на основе класса мы используем ключевое слово состояния и в функциональном компонентном компоненте из React версии 16, которые мы используем Usestate крючок.
В компоненте класса мы используем такое состояние,
constructor(props) {
super(props);
this.state = {name: "Henry"};
}
Использование JSX для обновления DOM приводит к значительным улучшениям производительности сайта и эффективности развития. Как? Давайте посмотрим на виртуальный дом.
Что такое реквизит?
Реквисы – это аргументы, переданные в реагированные компоненты. Реквизиты передаются дочерним компонентам через HTML-атрибуты в виде одного объекта
function Welcome(props) {
return Hello, {props.name}
;
}
const element = Виртуальный домос
Что говорит Google?
Виртуальный DOM (VDOM) – это концепция программирования, где идеал или «виртуальный», представление пользовательского интерфейса хранится в памяти и синхронизировано с помощью «реального» дома библиотекой, такими как взаимодействие. Этот процесс называется примирением.
Примечание. Реактивное волокно – это новое примирение двигателя в реакции 16.
Что такое DOM (модель объекта документа)?
Модель объекта документа (DOM) – это интерфейс программирования для документов HTML и XML (расширяемой разметки). Он определяет логическую структуру документов и способ доступа к документу и манипулировать.
Дом – это способ представлять веб-страницу в структурированном иерархическом способе, чтобы оно станет легче для программистов и пользователей, чтобы скользить через документ.
Когда веб-страница загружается, браузер создает DOM.
Вот изобразительное представление DOM.
Итак, какой виртуальный дом (VDOM) и почему мы его используем?
В традиционном приложении/веб-сайте разработано с использованием HTML, CSS, JavaScript, специально для статических сайтов, он несколько эффективен для использования DOM в качестве DOM Roloads в несколько раз, как очень мало страниц.
Но для динамических веб-сайтов каждый раз, когда пользователь нажимает что-то или представляет что-то, что мы должны перезагрузить DOM на каждом клике или измените страницу (что вызывает обновление страницы).
Если вы используете RECT, JSX для обновления DOM, затем RECT создает виртуальный DOM (VDOM). VDOM – это копия настоящего дома и реагирует использует VDOM, чтобы увидеть, есть ли какие-либо изменения в том, что если есть какие-то, то он оказывает эти детали только в доме, оставляя остальные элементы, как это так.
Эта техника экономит время загрузки и тем самым для больших приложений экономит много времени загрузки и улучшает его производительность. 😄.
Каковы крючки жизненного цикла в реакции?
Жизненный цикл компонента может быть определен как серия методов, которые вызывают на разных этапах существования компонентов компонента. Всегда реактивный компонент имеет жизненный цикл собственного.
Есть четыре этапа: 1. Комната – конструктор (): где вы устанавливаете начальное состояние, и он работает только один раз. – Статические GetderedStateFromprops (): бежит сразу после конструктора, поскольку он статичен и получает производное состояние из изменений в реквизитах. – Render (): Вы возвращаете свой код JSX здесь. – ComponentDIDMount (): он работает после установки компонента. Используется для создания вызовов API. 2. Обновление обновления происходит, когда ваше состояние или реквизиты (свойства) меняются. – Статические GetderedStateFromprops (): То же, что и в фазе монтажа – TOSCOCOMPONENTUPDATE (): Здесь вы можете решить, хотите ли вы обновить состояние, он имеет доступ к Prevstate & NewState, вы можете сравнить их и возвращать, если вы хотите сделать его еще ложный. – Визуализация (): То же самое, что и в фазе монтажа – getsnapshotbeforeupdate (): это фаза предемирования, монтаж DOM происходит после этого метода. Незадолго до DOM оказывает, если вам нужно помнить, где был прокрутки и т. Д. Вы можете использовать его – ComponentDidupdate (): Что бы вы ни делали с ComponentDidmount (), вы можете сделать это здесь. 3.unmounting – ComponentWillunMount (): Здесь компонент умирает 😢