Цели

Используйте React, чтобы написать простейший привет, мир!

Процесс

Я знаю Javascript, HTML и CSS, могу создать простой сайт, не навороченный, но работающий. Я хочу изучить интерфейсный фреймворк для создания более сложного веб-сайта, так как очень сложно использовать jQuery для создания большого веб-сайта. Поэтому я использовал простой способ выбрать фреймворк, проверив Github. Я обнаружил, что в тройке лучших интерфейсных фреймворков (React, Angular, Vue) React получает больше звезд, может быть, он не самый подходящий для меня, но он не должен быть хуже двух других.

После прочтения некоторых руководств в Интернете я был так разочарован, JXS, Babel, Webpack, ES6, Flus, Redux и т. д., так много концепций, и я услышал большинство из них впервые. Я думаю, что было бы лучше сначала не трогать эти вещи, чтобы не отказываться от React. Я только хочу написать простую единственную страницу с React, а затем изучить ее шаг за шагом.

Как обычно, изучение языка программирования путем написания самого простого «Hello World!» первый. Официальный сайт рекомендует использовать JSX, но это не обязательно, поэтому я решил использовать свой ограниченный JavaScript для написания «Hello World!». кроме JSX.

Вот:

Сохраняем код в HTML-файле, например index.html, и открываем его в браузере (настоятельно рекомендую использовать Chrome при разработке веб-страницы), после чего получаем hello world!✌️:

Почему две библиотеки? react.js — это то, что мне нужно, а как насчет react-dom.js? похоже, это связано с DOM в браузере. погуглив некоторое время, я нашел ответ в Официальном блоге React：

Когда мы смотрим на такие пакеты, как react-native, react-art, react-canvas и react-three, становится ясно, что красота и суть React не имеют ничего общего с браузерами или DOM.

Мы считаем, что истинная основа React — это просто идеи компонентов и элементов: возможность описать то, что вы хотите отобразить, декларативным способом. Это части, общие для всех этих разных пакетов. Части React, специфичные для определенных целей рендеринга, обычно не являются тем, о чем мы думаем, когда думаем о React. Например, сравнение DOM в настоящее время позволяет нам создавать React для браузера и делать его достаточно быстрым, чтобы быть полезным, но если бы у DOM не было императивного API с отслеживанием состояния, нам вообще не нужно было бы сравнивать.

Чтобы сделать это более понятным и облегчить создание большего количества сред, в которых React может выполнять рендеринг, мы разделили основной пакет реагирования на два: react и react-dom.

Суть в том, чтобы разделить построение пользовательского интерфейса и рендеринг. В react.js есть API для создания элементов пользовательского интерфейса, а react-dom.js отвечает за отображение элементов пользовательского интерфейса в браузере.

Для реактивного натива, реактивного искусства, реактивного холста и реактивного три оставьте их, пока я не узнаю React,

Хорошо, что эти две библиотеки имеют несколько API, должны быть просты в освоении. Я начну с двух из них, используемых сегодня:

  • React.createElement
  • ReactDOM.render

React.createElement

Создать и вернуть новый элемент React заданного типа. Аргумент типа может быть либо строкой имени тега (например, «div» или «span»), либо типом компонента React (класс или функция).

Удобные оболочки вокруг React.createElement() для компонентов DOM предоставляются React.DOM. Например, React.DOM.a(…) — это удобная оболочка для React.createElement(‘a’, …). Они считаются устаревшими, и мы рекомендуем вам либо использовать JSX, либо напрямую использовать React.createElement().

Код, написанный с помощью JSX, будет преобразован для использования React.createElement(). Обычно вы не будете вызывать React.createElement() напрямую, если используете JSX. См. React без JSX, чтобы узнать больше.

Таким образом, элемент React является оболочкой HTML-тега или компонента React (о, что такое компонент React, теперь я буду считать его похожим на HTML-тег), и на странице React Element:

Элементы — это наименьшие строительные блоки приложений React.

Например, в «Привет, мир!» app я создал элемент с типом <h1></h1>, но элемент не является h1 DOM в браузере, реакция отобразит элемент в браузере как <h1>Hello World!</h1>.

Другое дело, что в отличие от DOM, элемент React дешев в создании, как и POJO в Java。И элемент React является неизменяемым, да, он неизменяем, после создания его нельзя изменить, в том числе его атрибуты и потомки. а как обновить DOM? каждый раз создавая новый элемент. 😓 это дорого? ну может React не такой простой и глупый, мне нужно больше учиться. но с другой стороны, это достаточно дешево, чтобы создать столько элементов, сколько вы хотите.

ReactDOM.render

Визуализировать элемент React в DOM в предоставленном контейнере и вернуть ссылку на компонент (или вернуть null для компонентов без сохранения состояния).

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

Если указан необязательный обратный вызов, он будет выполнен после визуализации или обновления компонента.

Этот API используется для отображения элемента React в браузерах. Обратите внимание на второе предложение:

это произведет обновление

😓, Говорят, что элемент React неизменяем, но теперь его можно обновить?! Я продолжу изучать React с этими сомнениями.

Усиление

  • Написал простейшее «привет, мир!» с реакцией，✌️
  • Элемент React дешев в создании и неизменен.
  • Элемент React отличается от DOM
  • React уже представляет собой огромную и сложную экосистему, и мне нужно изучать ее шаг за шагом с терпением.

Спутанность сознания

  • Что такое «компонент React»
  • Является ли элемент React неизменным или нет?