В чем разница между React Native и Flutter?

Question

В чем разница между React-native и Flutter технически?

Кажется, что обе технологии работают относительно одинаково, и Flutter даже признает, чтоВдохновение от React: faq

Это становится еще более очевидным, когда они перечисляют одинаковые функции и имеют почти одинаковый синтаксис (StatefulWidget против Component класс).

Подобно тому, как AngularDart является реализацией Dart для Angular;Правильно ли предположить, что Flutter - это реализация React в Dart?

Answer 1

У Реми уже есть пара хороших моментов.У меня есть еще один.

Интерпретируется с мостами - против нативных и без мостов

Несмотря на то, что может означать название, приложения React Native не скомпилированы в нативный код.Приложения React Native интерпретируют код Javascript во время выполнения , а обновления компонентов в приложении React Native проходят через мост к аналогу собственного представления.Это может немного замедлить ход событий и стать узким местом.

Напротив, приложения Flutter (в режиме выпуска) скомпилированы с собственным кодом , а не требуется мост для управления пользовательским интерфейсом.Это, в свою очередь, по крайней мере в теории, будет более производительным - нет необходимости совершать круговые поездки на родную землю , чтобы вносить простые изменения в пользовательский интерфейс.Не говоря уже о том, что код выпуска Flutter изначально скомпилирован и в него не вовлечены интерпретаторы.

Dance monkey, dance

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

Мы сделаем это с очень гипотетическим примером приложения.Наше приложение React Native имеет кнопку, которая заставляет обезьяну танцевать на экране.В React Native наши кнопки и компоненты танцующей обезьяны написаны на Javascript и React.

Переводчики

Так как Javascript не является языком первого класса для Android или iOS, ваше приложение React Native включает интерпретатор Javascript , который интерпретирует ваш Javascriptкод во время выполнения .Без переводчика вы бы вообще не смогли писать приложения на Javascript - даже простой console.log('Hello World!') не сработал бы.

Согласно React Native docs , в «большинство случаев» , код Javascript будет интерпретироваться с помощью JavascriptCore.

Мосты

Под капотом React Native использует собственные представления Android и iOS UIViews для отображения компонентов пользовательского интерфейса(например, танцующие обезьяны) на экране.Но так как части пользовательского интерфейса SDK для Android и iOS не используют Javascript, вы не можете заставить обезьяну танцевать, используя только Javascript.

Здесь мост вступает в игру.На другой стороне моста находятся ваши компоненты и логика React Native, написанные на Javascript.С другой стороны, у нас есть хост-приложение для Android / iOS, которое отображает нативные виды на экране.Теперь давайте назовем две стороны моста: земля Javascript и родная земля .

Итак, что происходит, когда пользователь нажимает на нашу "танцуй, обезьяна, танцуй!button?

1. Собственное представление Android / iOS отправляет событие onclick , которое проходит по мосту на землю Javascript .
2. Наш слушатель onclick, написанный на Javascript, вызывается.Это простой вызов, который переключает логическое значение внутри компонента.Что-то вроде setState(() {isMonkeyDancing = true}) или аналогичного.
3. Реакт видит, что что-то изменилось.Он предлагает обновленное представление элементов пользовательского интерфейса с танцующей обезьяной.Представление - это просто дерево простых объектов Javascript, которое описывает обновленное состояние пользовательского интерфейса.
4. Дерево объектов Javascript сериализуется и отправляется по мосту на родную землю .
5. Хост-приложение получает сериализованное дерево объектов и десериализует его.Теперь он может обновить собственное представление Android / iOS до , чтобы соответствовать десериализованному представлению пользовательского интерфейса .Наша обезьяна сейчас танцует, а наш пользователь вечно счастлив.

Так что в этом примере, для перехода по мосту два раза требуется одно нажатие кнопки.

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

Это медленнее, чем просто представить представление пользовательского интерфейса и обновить пользовательский интерфейс с помощью этого напрямую .Кроме того, стоит интерпретировать Javascript во время выполнения по сравнению с заранее скомпилированным кодом.

Суть

Поскольку Flutter по сути является переносимым механизмом рендеринга, Flutter не делает 'Для обновления пользовательского интерфейса нужен мост .И поэтому обновления пользовательского интерфейса, по крайней мере, теоретически, происходят быстрее.Это одна из причин, почему создание приложений со сложной анимацией или такими вещами, как Flare , SpriteWidget или даже играми, будет более прибыльным с Flutter по сравнению с React Native.

И поскольку Flutter в режиме релиза скомпилирован AOT, Flutter также не требуется интерпретатор.В этом разница между Flutter и React Native.

Answer 2

Архитектурно, React Native (RN) и Flutter очень похожи.

То, что Flutter называет «виджетом», является строгим эквивалентом «компонента» React.Вот что означает Flutter, когда говорит, что он вдохновлен React.

Разница между ними заключается в других аспектах фреймворков:

Интерпретируемый Javascript VS Compiled Dart

Использование FlutterDart, типизированный язык, предлагающий компиляцию "Just in time" (JIT) и "Ahead of time" (AOT) (с включенным встряхиванием дерева)

В разработке Flutter использует JIT-компиляцию для расширения возможностейперезагрузить.А для производственных сборок он использует компиляцию AOT для лучшей производительности.

---

React-Native использует Javascript, улучшенный за счет некоторого синтаксического сахара под названием JSX.

JSX - это другой язык, который компилируется вJS, затем оценивается во время выполнения.

Мост к нативному VS Полное переписывание

Реактивный нативный встроен на вершине нативного .

При использовании кнопки или текста в React Native вы манипулируете официальным объектом, используемым для собственных приложений Android / iOS.

Мы можем рассматривать React как общий язык между Android / iOS для объявления макетов, но в основном приложения отличаются друг от друга потенциальными несоответствиями.

Это не true кросс-Платформа.Но в то же время он обеспечивает лучшую совместимость с нативными элементами.

---

Flutter - противоположность.Цель Flutter - использовать как можно меньше нативных элементов.

Flutter запрашивает у ОС окно, а затем полностью управляет его содержимым, используя Dart и Skia (это графический движок c ++).

Это имеет несколько последствий:

• Flutter должен был переопределить всю логику интерфейса.Будь то прокрутка, сенсорные события, анимация, ...
• Приложение полностью написано на Dart, даже глубоко в нижних слоях.Это означает, что, какой бы ни была платформа, всегда выполняется один и тот же код.
• Потенциально все, что может запустить код Dart и создать окно, может запустить Flutter, и приложения должны работать практически без изменений.Таким образом, веб находится в стадии разработки ( Hummingbird ) и доступна базовая поддержка настольных компьютеров.

В некоторой степени мы можем сравнить Flutter с движком веб-просмотра / игры, но оптимизированным для случайных приложений.