Сначала я расскажу немного о том, что такое React — React — это библиотека Javascript, созданная Facebook (примерно в 2013 году) для создания динамических пользовательских интерфейсов для Интернета.
Ключевое слово здесь динамический, что означает, что контент на странице может динамически меняться, пока вы взаимодействуете с ним. Другими словами, страница отображает не только статический HTML.
Для полноты картины я решил написать простое объяснение иболее техническое объяснение того, как работает React. Однако я предполагаю, что это непрофессионал, который знает, что такое JavaScript и HTML, но мало что знает о динамических средах JavaScript, таких как React, Vue и Angular.
Объяснение непрофессионала
Каждая веб-страница, которую вы видите, представляет собой HTML-документ, который загружается один раз в вашем браузере, когда вы вызываете сервер, вводя URL-адрес.
Статическая HTML-страница — это просто страница, на которой отображается содержимое. Вы не можете взаимодействовать со страницей таким образом, чтобы содержимое страницы менялось.
Динамическая HTML-страница, с другой стороны, позволяет вам взаимодействовать со страницей таким образом, что вы можетеизменить ее содержимое. Например, нажав кнопку, чтобы добавить элемент списка дел, он сразу же появится на странице.
Чтобы добавить это динамическое поведение, JavaScript запускается в вашем браузере. Он манипулирует DOM таким образом, что эти динамические изменения в содержимом страницы немедленно отражаются при вашем взаимодействии с ней.
React — это библиотека, которая позволяет вам писать код JavaScript, который может это сделать.
Как он может динамически манипулировать DOM при взаимодействии со страницей?
Он сохраняет виртуальную копию текущей модели DOM. Когда вы пытаетесь изменить какое-либо содержимое на веб-странице, создается новый виртуальный DOM с этими изменениями.
Вы можете подумать, что React просто перезагрузит новую обновленную виртуальную модель DOM, но это будет неэффективно и снизит производительность. Зачем React снова загружать всю страницу, если изменились только некоторые ее части?
React сравнивает виртуальную копию DOM (до внесения изменений на страницу) с новой виртуальной копией DOM (с новыми изменениями) и перезагружает только те части страницы, которые изменились.
Это все, что вам нужно знать — React использует виртуальные копии DOM на разных этапах для перезагрузки только тех частей страницы, которые изменились, предоставляя пользователю динамическое взаимодействие с веб-страницей.
Более "техническое" объяснение
Все, что я сказал выше, верно — React использует виртуальные копии DOM для перезагрузки только тех частей страницы, которые изменились. Но какие детали, связанные с JavaScript и React, отвечают за это?
React использует что-то под названием JSX — расширение для JavaScript, созданное Facebook. JSX выглядит точно так же, как обычный HTML — он имеет открывающие и закрывающие HTML-теги с содержимым между ними. Однако этот HTML-код, похожий на HTML, написан в файле Javascript (.js), а не в файле HTML (.html), поскольку в конечном итоге он преобразуется в обычный JavaScript, управляющий DOM.
ES6 позволяет вам создавать компоненты на основе классов в React, которые по сути представляют собой пакеты HTML-подобного кода в форме JSX с прикрепленным к ним динамическим поведением.
У каждого компонента на основе классов есть метод со специальным именем, называемый render()method, который возвращает JSX, который в конечном итоге преобразуется в JavaScript и заполняет DOM этими элементами JSX. Метод render() запускается, как только компонент загружается, чтобы добавить его в DOM.
Чтобы сделать страницу динамической, нам нужно возвращать переменные между тегами JSX, а не статическое содержимое. Эти переменные определены в классе как свойства специального объекта, называемого объектом state. Поэтому вместо возврата JSX, например
<p>Sid</p>
Вы бы вернули JSX, как
<p>{this.state.name}</p>
Или любые другие переменные, которые зависят от свойств state.
Когда определенной функции необходимо обновить одну из переменных состояния, чтобы отразить динамическое изменение DOM, это делается с помощью специальной функции с именем setState(). Итак, вместо того, чтобы писать код типа
это.state.name = ‘Дэйв’
Вы бы написали
это.setState({name : ‘Дэйв’});
Когда вызывается функция setState(), вызывается метод render() для повторной загрузки компонента, теперь с обновленным состоянием, чтобы предоставить пользователю динамическое взаимодействие со страницей. Используя функцию setState(), React легко может сказать, какие части компонента необходимо обновить — те, которые используют свойства объекта state .
Опять же, все это происходит эффективно и быстро — React использует виртуальные копии DOM для загрузки только тех частей компонента, которые были обновлены новыми значениями свойств state.
Я также должен упомянуть, что вам не нужно использовать ES6 и JSX для использования React. React работает в мире «JavaScript», поэтому вместо этого вы можете использовать обычные функции JavaScript, чтобы получить тот же эффект на странице. Однако Babel, транспилятор ES6 в ES5, позволяет вам использовать функции JSX и ES6, что обычно делает разработку с React проще, быстрее и интуитивно понятнее.
