reactjs — вопросы с ответами

ReactJS (или же просто React) – это библиотека JavaScript, созданная Джорданом Уолком, инженером Facebook, для быстрого и эффективного создания многофункциональных и полезных веб-приложений с наименьшими временными затратами. Основная цель ReactJS – обеспечить максимально возможную производительность рендеринга. Его сила проистекает из ориентации на отдельные компоненты. Вместо того чтобы работать со всем веб-приложением, ReactJS позволяет разработчику разбивать сложный интерфейс на более простые компоненты.

Вот несколько причин, почему React стал настолько популярным:

  • Работать с DOM API сложно. ReactJS в основном дает разработчикам возможность взаимодействовать с виртуальным браузером, который более дружелюбен, чем настоящий браузер. Виртуальный браузер React действует как посредник между разработчиком и реальным браузером;
  • ReactJS позволяет разработчикам декларативно описывать свои пользовательские интерфейсы и моделировать их состояние. Это значит, что вместо того, чтобы придумывать шаги для описания транзакций на интерфейсах, разработчики просто описывают интерфейсы в терминах конечного состояния (например, функции). Когда транзакции происходят с этим состоянием, React заботится об обновлении пользовательских интерфейсов на основе этого;
  • ReactJS – это просто JavaScript, в который встроен очень маленький API, обладающий всего несколькими функциями и способами их использования. Так что ваши навыки JavaScript сделают из вас по-настоящему хорошего разработчика в React. Тут нет никаких барьеров для входа. Разработчик JavaScript может стать продуктивным разработчиком React за несколько часов.

ReactJS как библиотека

Официальное определение React гласит, что это библиотека JavaScript для создания пользовательских интерфейсов. Важно понимать две разные части этого определения:

  1. React – это библиотека JavaScript, а не фреймворк. Это не универсальный инструмент, и нам часто нужно использовать больше библиотек с React для формирования какого-либо решения. Он фокусируется только на одной задаче, и еще на том, чтобы делать ее очень хорошо.
  2. То, что React делает очень хорошо, является его второй частью определения – создание пользовательских интерфейсов. Пользовательский интерфейс – это все, что мы предоставляем пользователям, чтобы они взаимодействовали с машиной. Пользовательские интерфейсы есть везде, от простых кнопок на микроволновой печи до приборной панели космического челнока. Если устройство, которое мы пытаемся подключить, может понимать JavaScript, мы можем использовать React для описания его пользовательского интерфейса.

Поскольку веб-браузеры понимают JavaScript, мы можем использовать React для описания веб-интерфейсов пользователя. Особенно удачным тут является слово «описать», потому что это то, что мы в основном делаем с React, мы просто сообщаем ему, что хотим, и React будет создавать фактические пользовательские интерфейсы от нашего имени в веб-браузере. Без React или подобных библиотек нам бы пришлось вручную создавать пользовательские интерфейсы с помощью собственных веб-API и JavaScript.

Когда вы слышите утверждение «React является декларативным», это именно то, что оно означает: мы описываем пользовательские интерфейсы с помощью React и сообщаем ему, чего мы хотим (а не как это сделать). React позаботится о «как» и переведет наши декларативные описания (которые мы пишем на языке React) в реальные пользовательские интерфейсы в браузере. React разделяет эту простую декларативную силу с самим HTML, но с ReactJS мы получаем декларативное представление для интерфейсов HTML, которые представляют динамические данные, а не только статические.

Основные концепты ReactJS

React имеет три основные концепции дизайна, которые определяют его популярность:

Применение повторно используемых, компонуемых и сохраняющих состояние компонентов

В ReactJS мы описываем пользовательские интерфейсы с использованием компонентов. Вы можете думать о компонентах как о простых функциях (на любом языке программирования). Мы вызываем функции с некоторым вводом, и они дают нам некоторый вывод. Мы можем повторно использовать функции по мере необходимости и составлять более крупные функции из более мелких.

Компоненты представляет собой то же самое; мы называем их ввод «свойствами» и «состоянием», а вывод компонента – это описание пользовательского интерфейса (который похож на HTML для браузеров). Мы можем повторно использовать один компонент в нескольких пользовательских интерфейсах, и компоненты могут содержать другие компоненты.

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

Природа реактивных обновлений

Название React – самое простое объяснение этой концепции. Когда состояние компонента (вход) изменяется, пользовательский интерфейс, который он представляет (выход), также изменяется. Это изменение в описании пользовательского интерфейса должно быть отражено в устройстве, с которым мы работаем.

В браузере нам необходимо восстановить представления HTML в Document Object Model (DOM). С React нам не нужно беспокоиться о том, как отразить эти изменения, и даже не решать, когда вносить изменения в браузер. React будет просто реагировать на изменения состояния и автоматически обновлять DOM при необходимости.

Генерация HTML

С React мы пишем HTML, используя JavaScript. Мы полагаемся на способность JavaScript генерировать HTML, который зависит от определенных данных, вместо того, чтобы улучшать HTML, чтобы он работал с этими данными. Улучшение HTML – это то, что обычно делают другие JavaScript-фреймворки. Например, Angular расширяет HTML такими функциями, как циклы, условные выражения и др.

Когда мы получаем только данные с сервера (в фоновом режиме, с AJAX), нам нужно нечто большее, чем HTML, чтобы работать с этими данными. Так что приходится использовать расширенный HTML, либо мощь самого JavaScript для генерации HTML. Оба подхода имеют свои преимущества и недостатки. ReactJS включает в себя последний, с аргументом, что преимущества сильнее, чем недостатки.

Фактически, есть одно важное преимущество, которое может обосновать этот подход сам по себе. Использование JavaScript для рендеринга HTML позволяет React легко сохранять виртуальное представление HTML в памяти (обычно это называется The Virtual DOM). React использует Virtual DOM для виртуального отображения дерева HTML, а затем, каждый раз, когда изменяется состояние, и мы получаем новое дерево HTML, которое необходимо перенести в DOM браузера. Вместо записи всего нового дерева, React будет записывать только разницу между новым и предыдущим деревом (поскольку в React оба дерева находятся в памяти). Этот процесс известен как Tree Reconciliation, и по мнению многих это лучшее, что произошло в веб-разработке со времен AJAX.

Пример алгоритма согласования ReactJS

Мы начнем этот пример с нуля. Создайте новый каталог и запустите там ваш любимый редактор (можно воспользоваться и онлайн интерактивной средой):

Создайте файл index.html в этом каталоге и поместите туда стандартный шаблон HTML. Добавьте в этот шаблон файл script.js и поместите в него скрипт console.log, чтобы проверить, работает ли:

Откройте файл index.html в своем браузере и убедитесь в наличии пустого шаблона, и в том, что вы можете видеть на вкладке консоли dev-tools тестовое сообщение console.log, которое вы поместили в script.js:

Теперь давайте добавим саму библиотеку React, которую мы можем взять с веб-сайта Reactjs. Скопируйте сценарии реагирования и включите их в index.html:

Мы включили здесь два разных скрипта по важной причине: саму библиотеку React можно использовать без браузера. Чтобы использовать ReactJS с браузером, нам нужна библиотека ReactDOM.

Когда мы обновим браузер сейчас, мы должны увидеть и React, и ReactDOM, доступные в глобальной области видимости:

Благодаря этой простой настройке мы теперь можем получить доступ к API-интерфейсам React и ReactDOM, и, конечно, у нас также есть доступ к собственным веб-API и JavaScript, которые мы собираемся использовать в первую очередь.

Чтобы динамически добавлять HTML в браузер, мы можем просто использовать чистый JavaScript и сам DOM Web API. Давайте создадим элемент div для размещения нашего HTML-контента JavaScript и присвоим ему идентификатор «js». В элементе тела index.html прямо перед тегом script добавьте:

Теперь давайте возьмем этот новый элемент div по его идентификатору и поместим его в константу. Давайте назовем эту константу jsContainer. Мы можем использовать document.getElementById, чтобы извлечь div из HTML:

Чтобы управлять содержимым этого div, мы можем использовать вызов метода setHTML непосредственно для элемента div. Мы можем использовать этот вызов для предоставления любого HTML-шаблона, который мы хотим вставить в DOM. Давайте вставим элемент div с классом «demo» и строкой «Hello JS» в качестве содержимого:

Убедитесь, что все сработало в браузере. Если это так, то вы увидите строку "Hello JS" на экране. Эта демонстрационная версия пока что является нашим пользовательским интерфейсом. Он очень прост и предназначен для просмотра выведенного текста пользователями.

И document.getElementById, и element.innerHTML на самом деле являются частью собственного веб-API DOM. Мы общаемся с браузером, используя поддерживаемые API веб-платформы. Однако когда мы пишем код ReactJS, вместо этого мы используем React API и позволяем React взаимодействовать с браузером с помощью DOM Web API.

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

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

8 ответов
Сейчас много говорят о последнем мальчике в городе Редукс, Реду-Сага/Редукс-Сага. Он использует функции генератора для прослушивания/диспетчеризации действий. Прежде чем я обдумаю это, я хотел бы узнать плюсы/минусы использования redux-saga вместо подхода, redux-thunk ниже, где я использую redux-t...
redux
redux-saga
redux-thunk
21 янв. 2016, в 17:35
26 ответов
Я начал изучать React из любопытства и хотел узнать разницу между React и React Native, хотя не смог найти удовлетворительного ответа с помощью Google. React and React Native, похоже, имеет тот же формат. У них совсем другой синтаксис?
react-native
javascript-framework
06 янв. 2016, в 17:56
30 ответов
Я получаю эту ошибку: Неисправленная ошибка: инвариантное нарушение: тип элемента недействителен: ожидается строка (для встроенных компонентов) или класс/функция (для составных компоненты), но получил: объект. Это мой код: var React = require('react') var ReactDOM = require('react-dom') var Route...
react-router
07 дек. 2015, в 09:09
9 ответов
Я прочитал этот ответ, сокращая шаблон, посмотрел несколько примеров GitHub и даже немного попробовал редукс (приложения todo). Как я понимаю, официальные мотивы приведения к редуксу дают плюсы по сравнению с традиционными архитектурами MVC. НО это не дает ответа на вопрос: Почему вы должны испол...
redux
flux
reactjs-flux
08 сен. 2015, в 15:10
20 ответов
Я пытаюсь найти правильный способ определения некоторых компонентов, которые можно было бы использовать общим образом: <Parent> <Child value="1"> <Child value="2"> </Parent> Существует логика для рендеринга между родительскими и дочерними компонентами, вы можете представ...
react-jsx
03 сен. 2015, в 08:08
5 ответов
Я новичок в Bootstrap и застрял с этой проблемой. У меня есть поле ввода, и как только я ввожу только одну цифру, onChange функция из onChange, но я хочу, чтобы она onChange, когда я нажимаю "Enter", когда введено целое число. Та же проблема для функции проверки - она вызывается слишком рано. var i...
07 июль 2015, в 14:55
29 ответов
С react-router я могу использовать элемент Link для создания ссылок, которые обрабатываются обработчиком реакции вручную. Я вижу внутри, он вызывает this.context.transitionTo(...). Я хочу сделать навигацию, но не по ссылке, например, из раскрывающегося списка. Как это сделать в коде? Что такое this....
react-router
26 июнь 2015, в 18:17
17 ответов
Что делает ... в этом реакторе (с использованием JSX) и что он называется? <Modal {...this.props} title='Modal heading' animation={false}>
25 июнь 2015, в 11:59
4 ответа
Я видел, что оба используются взаимозаменяемо. Каковы основные варианты использования для обоих? Есть ли преимущества/недостатки? Является ли практика лучшей?
react-native
constructor
05 июнь 2015, в 15:19
15 ответов
У меня есть внешний (для компонента) наблюдаемый объект, который я хочу прослушать для изменений. Когда объект обновляется, он испускает события изменения, а затем я хочу повторно перенести компонент, когда обнаружено какое-либо изменение. С верхним уровнем React.render это было возможно, но внутри ...
react-jsx
03 июнь 2015, в 17:00
10 ответов
Когда важно передать props в super() и почему? class MyComponent extends React.Component { constructor(props) { super(); // or super(props) ? } }
ecmascript-6
01 июнь 2015, в 12:00
22 ответа
Я хочу прочитать свойства значения события onClick. Но когда я нажимаю на нее, я вижу что-то вроде этого на консоли: SyntheticMouseEvent {dispatchConfig: Object, dispatchMarker: ".1.1.0.2.0.0:1", nativeEvent: MouseEvent, type: "click", target Мой код работает правильно. Когда я запускаю, я вижу {...
22 апр. 2015, в 23:31
22 ответа
Как реагировать на настройку фокуса на конкретное текстовое поле после рендеринга компонента? Документация, похоже, предлагает использовать ссылки, например: Установите ref="nameInput" в поле ввода в функции рендеринга, а затем вызовите: this.refs.nameInput.getInputDOMNode().focus(); Но где я долж...
05 март 2015, в 23:50
34 ответа
Я использую React-router, и он отлично работает, когда я нажимаю кнопки ссылок, но когда я обновляю свою веб-страницу, он не загружает то, что я хочу. Например, я вхожу в localhost/joblist, и все в порядке, потому что я приехал сюда, нажав ссылку. Но если я обновляю веб-страницу, я получаю: Не могу ...
react-router
url
router
13 янв. 2015, в 18:29
52 ответа
Я пытаюсь сделать что-то вроде следующего в React JSX (где ObjectRow - отдельный компонент): <tbody> for (var i=0; i < numrows; i++) { <ObjectRow/> } </tbody> Я понимаю и понимаю, почему это недействительно JSX, поскольку JSX отображает вызовы функций. Однако, ...
05 апр. 2014, в 05:59
Наверх
Меню