Что такое Реакт?

Компоненты React на основе классов, которые фактически представляют собой JSX-пакеты HTML-подобного кода с прикрепленным к ним динамическим поведением, стали возможными благодаря ES6.

У каждого компонента на основе классов есть функция с уникальным именем render(), которая возвращает JSX, который в конечном итоге превращается в JavaScript, и добавляет эти элементы JSX в DOM. Как только компонент загружен, вызывается метод render(), чтобы добавить его в DOM.

Нам нужно возвращать переменные между элементами JSX, а не статическое содержимое, чтобы сделать страницу динамической. Объект состояния — это уникальный объект, свойства которого определяются как эти переменные в классе. Таким образом, вместо того, чтобы возвращать JSX, например

‹p›Сид‹/p›

Вы бы поставляли JSX, например

‹p›{это.имя_состояния}‹/p›

или любые дополнительные зависимые переменные от свойств состояния.

Уникальная функция с именем setState() используется, когда определенной функции необходимо обновить одну из переменных состояния, чтобы отразить динамическое изменение DOM. Таким образом, вместо того, чтобы писать код, подобный

this.state.name = «Дэйв»

Вы бы сочинили

«Дэйв» в качестве имени в this.setState();

Чтобы предоставить пользователю динамический опыт при использовании страницы, метод render() выполняется после того, как функция setState() использовалась для обновления состояния компонента. React может быстро определить, какие компоненты компонента нужно обновить — те, которые зависят от характеристик объекта состояния — с помощью функции setState().

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

React использует виртуальные копии DOM для загрузки только тех частей компонента, которые были изменены с новыми значениями свойств состояния, гарантируя, что все происходит быстро и эффективно.

Я должен добавить, что использование ES6 и JSX не является обязательным условием для использования React. Вы можете использовать стандартные функции JavaScript вместо React для достижения того же эффекта на странице, потому что React полностью существует в сфере «JavaScript». Однако вы можете использовать возможности JSX и ES6 благодаря Babel, транспайлеру ES6 в ES5, который делает работу с React в целом проще, быстрее и понятнее.

Реальный пример React

Я проиллюстрирую это на реальном примере.

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

Поэтому, чтобы лучше объяснить это, визуализируйте свою веб-страницу. Я буду использовать Facebook в качестве примера еще раз, потому что он широко используется и имеет общий response.js :D. Есть миллиарды сообщений, тонна посетителей и миллионы подобных вещей. Как они успевают все это в таком головокружительном темпе. Для этого они создают библиотеку react.js.

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

Как это работает

Основой Интернета является HTML. В 1990-х достаточно было одной строчки HTML-кода, чтобы заинтересовать людей. Затем с HTML DOM (объектной моделью документа) можно было взаимодействовать с помощью Javascript, который дебютировал в 1996 году. После его создания для модификации HTML DOM был введен Jquery. После этого в 2009 году появился дедушка интерфейсных фреймворков, предоставивший широкий спектр возможностей для создания мощного интерфейса. Теперь рассмотрим, как все эти изменения в HTML выполняются с помощью javascript (jquery, angular и т. д.). Учитывая, что Javascript в настоящее время намного мощнее, чем HTML, Facebook решил использовать Javascript для создания HTML (динамического контента; если вы знакомы с AJAX, вы должны иметь к нему отношение), для которого они создали react.js. . Проще говоря, React.js создает ваш html из вашего javascript.

Теперь вы знаете о компонентах и их функционировании. Вы знаете, что react.js преобразует Javascript в HTML. Однако Reactjs не создается с использованием стандартного Javascript. React.js написан на JSX, языке Java-скриптов XML. Тем не менее, HTML Javascript, я прав? Расскажите нам, как извлечь этот JS из JSX. Для этого мы нанимаем переводчика по имени Бабель. Babel преобразует ваш JSX в JS, который вы затем можете вставить в свой HTML для предоставления динамического контента.

Как это быстро

Виртуальный DOM — это понятие в React. Давайте представим, что ваш html создан с использованием javascript, который был транспилирован и сгенерирован. Скажем, компонент изменяется каждый раз, когда что-то в этом компоненте изменяется. Эти модификации теперь передаются в то, что называется VirtualDOM, а не напрямую в DOM. Реальный HTML DOM и VirtualDOM в настоящее время различаются, и в realDOM добавляются обновления. Это делается быстро, делая это. ссылка на иллюстрацию, которую я предоставил в начале ответа. Теперь это должно быть очевидно.

Преимущества

Одностраничная программа.

Вся страница неизменна; только несколько элементов.

Просто масштабировать и поддерживать код.

Большая функциональность, поскольку HTML создается с использованием изоморфного рендеринга на стороне сервера (JS).

Заключение

Фреймворк React широко используется, поэтому в нем есть много вещей, о которых вы должны знать, чтобы получить их, я бы порекомендовал вам пройти курс разработки программного обеспечения Tutort Academy.