React - это библиотека или фреймворк? Это можно интерпретировать по-своему, и я не собираюсь спорить по этому поводу. Однако я бы сказал, что это нечеткая разница. В отличие от большинства фреймворков, React не предоставляет никаких наборов инструментов, таких как ajax, маршрутизация, модульность и т. Д. Он выполняет только одно - рендеринг.
Очевидно, теперь вы должны понимать, что эта статья не для новичков во фронтенд-разработке. Также вам будет полезно иметь представление о реакции, чтобы полностью понять содержание. Поэтому, прежде чем вы продолжите чтение этой статьи, я предлагаю вам заняться разработкой очень простого веб-приложения с использованием React.
Прежде чем переходить к React, давайте кратко расскажем, как до React другие интерфейсные фреймворки предоставляли возможности для разработки высококачественного веб-интерфейса.
Наблюдаемый образец модели
Наблюдаемая модель модели до сих пор была ключевой концепцией в разработке высококачественного веб-интерфейса, особенно в одностраничных приложениях (SPA). Это так же просто, как подписаться на объект модели, и когда в объекте модели происходит изменение, получать уведомление и обновлять представление в соответствии с ним.
В высокопроизводительных веб-интерфейсах мутации сложны. Работать с мутациями намного сложнее.
В высокопроизводительных веб-интерфейсах мутации сложны. Работа с мутациями намного сложнее, потому что разработчику нужно подумать, какой элемент объектной модели документа (DOM) следует обновлять, а какой нет. Тем временем разработчик должен подумать о приоритетах, которым следует отдавать приоритет, а каким нет.
С точки зрения разработчиков, самый простой подход к обработке мутаций - это взорвать все и заново отрисовать его с самого начала. Но с точки зрения браузера это очень дорого, и это кошмар для пользователей.
Команда Facebook React приняла это во внимание и создала библиотеку React, которая взяла на себя сложность работы с мутациями, и дала разработчикам свободу продолжать в соответствии с шаблоном мышления, который, когда происходит мутация, React взрывает все это и выполняет повторный рендеринг. это с самого начала. Короче говоря, разработчикам не нужно беспокоиться об изменениях состояния, A → B → C, B → D, A → E и т. Д. Это просто ноль для рендеринга.
Разработчикам не нужно беспокоиться об изменениях состояния, A → B → C, B → D, A → E и т. Д. Это просто ноль для рендеринга.
Не приходите к ошибочному выводу, что реакция - это буквально взорвать все вещи и перерисовать их. На самом деле это не так. Он просто берет на себя сложные мутации и обновляет DOM с наименьшим количеством возможных манипуляций. Посмотрим, как React этого добился.
Декларативные компоненты
Для достижения нуля для восприятия рендеринга React представил нечто, называемое «декларативными компонентами». React предоставил разработчикам возможность описывать, как их компонент выглядит в любой момент времени.
Опишите, как ваш компонент выглядит в любой момент.
Если вы немного поиграли с React, возможно, вы уже знаете, что такое компонент. Но если вы новичок, не думайте об этом компоненте как о шаблоне или как о функции, которая возвращает какое-то значение. В обоих случаях он должен буквально взорвать все это и заново отрендерить его с самого начала.
Декларативные компоненты - это скорее набор API-интерфейсов, которые интерфейсные разработчики реализуют для требуемых элементов пользовательского интерфейса, инкапсулирующих множество вещей, таких как разметка, стили, CSS, внешний вид, поведение, javascript и т. Д.
Набор API-интерфейсов, которые интерфейсные разработчики реализуют для требуемых элементов пользовательского интерфейса.
В компоненте React есть нечто, называемое состоянием. Когда мы меняем состояние компонента через React Component.setState (), React творит чудеса и обновляет необходимые изменения в представлении.
Как происходит рендеринг с помощью React
Я хотел бы обсудить это в двух разделах следующим образом:
- Начальный рендер
- Как происходят обновления
1. Первоначальный рендеринг
Есть только одна функция рендеринга, описывающая, как компонент выглядит в любой момент времени.
render: function () {….}
Эта функция рендеринга возвращает представление предполагаемого представления. Здесь компоненты могут состоять из других компонентов. Чтобы получить окончательное представление, React рекурсивно вызывает функцию рендеринга внутренних компонентов для построения иерархии. В конце рекурсивных вызовов React получает полное представление компонента, описывающего предполагаемое представление в любой момент времени.
С представлением компонента React сгенерирует строку разметки и вставит ее в DOM следующим образом:
- получить представление
- повторить это
- сгенерировать строку разметки
- внедрить в DOM
Чтобы сделать рендеринг более гибким и эффективным, React использует двухпроходный рендеринг.
Двухпроходный рендеринг
- Сгенерируйте строку разметки и вставьте ее в DOM
- Присоединить события (после того, как разметка введена в документ) с использованием утверждения события на верхнем уровне
Здесь при двухпроходном подходе рендеринга только после внедрения сгенерированной разметки в документ события подключаются, как только JavaScript готов. Таким образом, все работает нормально, обеспечивая большую гибкость. Например, поскольку строка разметки генерируется полностью независимо от событий, рендеринг может происходить где угодно, на стороне сервера, веб-воркера, мобильных приложений и т. Д.
2. Как происходят обновления
Вместо типичных обновлений React использует согласование для сохранения актуальности представления. В отличие от других технологий фронтенд-разработки, React не имеет явной модели привязки данных. Даже если данные (состояние компонента) изменяются, представление обновляется. Давайте посмотрим, как это происходит, и вы удивитесь, насколько прост и эффективен этот подход.
Первоначально, как я уже объяснил, React получает представление, генерирует строку разметки и внедряет ее в DOM. Тем временем react сохраняет строку разметки в памяти, это называется Virtual DOM в контексте React.
Когда происходит изменение состояния компонента, React вызывает рендеринг и генерирует строку разметки в этой точке. Теперь React имеет ранее сгенерированную строку разметки и текущую эффективную строку разметки. После этого процесс выглядит следующим образом:
- Сравнивает две строки разметки. React делает это буквально. Техническое слово для этого - «виртуальное различие».
- Вычисляет минимальный набор различий.
- Сгруппируйте минимальный набор манипуляций с DOM, необходимых с ними, чтобы получить желаемое представление. Именно здесь React оптимизирует и устраняет избыточные и ненужные манипуляции с DOM.
- Примените вычисленные манипуляции с DOM.
Вопрос здесь в том, что React сравнивает всю строку разметки, не медленно? Ответ очень простой. JavaScript действительно быстр, но манипуляции с DOM очень медленны. Чтение и запись в DOM происходит медленно, перерисовка - медленно.
JavaScript действительно быстр, но манипуляции с DOM очень медленны.
Кроме того, все еще вызывает беспокойство память. Поскольку в пользовательском интерфейсе появляется все больше и больше элементов, это может стать проблемой. Но поскольку мы рассматриваем преобладающие аппаратные возможности в среднем случае, такое использование памяти не является большой проблемой, если вы не разрабатываете веб-приложения для очень примитивных устройств.
Что следующее?
О React-Fiber я расскажу в следующей статье. Я сосредоточусь на том, что может предложить React-Fiber, и на улучшениях, которые он предоставил сообществу Front-End разработки.
Лицензирование React
Большинство разработчиков забывают об этом важном моменте, пока не сталкиваются с проблемой лицензирования. Это правда, что Facebook сделал React открытым. Открытый исходный код не означает, что вы можете делать с этим конкретным проектом все, что захотите, или можете использовать его так, как вам нравится, без малейшего беспокойства. Когда дело доходит до реакции, она особенная.
React находится под лицензией BSD + Patents. Здесь то, что может быть проблематичным при использовании React, - это положения о патентной лицензии, включенные Facebook. Это может привести к отзыву лицензии, если ваше приложение или компания вступят в спор с Facebook. Это может быть редкая ситуация, даже если лучше знать вещи заранее.
Проблемная оговорка
Лицензия, предоставленная по настоящему Соглашению, будет прекращена автоматически и без уведомления, если вы (или любая из ваших дочерних компаний, корпоративных аффилированных лиц или агентов) инициируете прямо или косвенно или примите прямую финансовую заинтересованность в любом Заявлении о патенте: (i) против Facebook или любого из своих дочерних компаний или корпоративных аффилированных лиц, (ii) против любой стороны, если такое Заявление о патенте возникает полностью или частично из любого программного обеспечения, технологии, продукта или услуги Facebook или любых ее дочерних или корпоративных дочерних компаний, или (iii) против любой стороны, имеющей отношение к Программному обеспечению. Несмотря на вышесказанное, если Facebook, его дочерние компании или аффилированные лица подадут иск против вас в первую очередь, заявив о нарушении патентных прав, и вы ответите, подав встречный иск о нарушении патентных прав в этом судебном иске против этой стороны, которая не связана с Программным обеспечением, лицензия, предоставленная по настоящему Соглашению, будет не прекращать действие согласно разделу (i) этого параграфа из-за встречного иска.
Недавно в сообществе разработчиков ПО с открытым исходным кодом возникла шумиха, призывающая Facebook подумать о повторном лицензировании React, но Facebook официально заявил, что пока они не заинтересованы в этом.
