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

Почему выбирают кроссплатформенную платформу?

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

Во-первых, экологическое строительство

И React Native, и Flutter требуют среды разработки для Android и IOS, т.е. JDK, Android SDK, Xcode и т. Д., С той разницей, что :

  • Для Native React требуются конфигурации, такие как, и т. Д .npmnodereact-native-cli
  • Для Flutter требуются подключаемые модули Dart и Flutter для Android Studio / VSCode. flutter sdk

С точки зрения среды конфигурации среда Flutter Native относительно проста, в то время как конфигурация среды React Native относительно сложна, и в случае личного контакта показатель успешности первого запуска конфигурации выше, чем у React Change Native, и Причина провала Flutter во многом связана с сетью. node_module

Разрабатывать предпочитаемые компьютеры Mac для разных платформ одновременно, и нет причин для этого.

Во-вторых, реализация принципа

На Android и IOS и Flutter, и React Native по умолчанию требуют поддержки Activity / ViewController для собственной платформы и относятся к «одностраничному приложению» на собственном уровне, и самая большая разница между ними - это создание пользовательского интерфейса:

  • React Native:

Native React - это набор фреймворков пользовательского интерфейса, в которых по умолчанию React Native загружает файл JS, а затем запускается для анализа макета файла Bundle, в результате чего создается ряд встроенных элементов управления для рендеринга.ActivityJavaScriptCore

Проще говоря, настройте макет страницы, написав код JS, и тогда React Native в конечном итоге разрешит рендеринг в собственные элементы управления, такие как соответствие меток, соответствие меток, соответствие меток и так далее.

Таким образом, React Native дает странице дополнительный прирост производительности по сравнению с такими фреймворками .Ionic

  • Флаттер:

Если React Native совместим с платформой для разработчиков, это больше похоже на концепцию маскировки платформы для разработчиков.

В The Flutter требуется только одна платформа, а остальная часть Flutter говорит: «Вы можете лечь, и мы будем двигаться сами». SurfaceCanvas

Подавляющее большинство Flutter не зависит от платформы, и разработчики основываются на разработке приложений и работе на них поверх них, поддерживаемых адаптацией и кроссплатформенной поддержкой. Этот процесс кроссплатформенной поддержки на самом деле заключается в том, чтобы «данные» the widgets в пользовательском интерфейсе Flutter, а затем вывести их прямо на экран с помощью Skia на The Engine. WidgetFrameworkFrameworkEngineEngine

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

  • Дом:

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

Как я видел в серии статей о Flutter, то, что мы пишем в The Flutter, на самом деле не является элементом управления рендерингом, который похож на метку в React, больше похож на профиль, а составленное из него дерево не является настоящим дерево рендеринга .WidgetWidgetWidget

The widget изменяется через Element по мере рендеринга и в конечном итоге преобразуется в RenderObject для рисования, а renderTree, который в конечном итоге состоит из «реального объекта рендеринга», и каждое изменение, инициируемое деревом, не обязательно приводит к полному обновлению дерева. WidgetRenderObject

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

В-третьих, разработка программирования

JavaScript, используемый Native React, не новичок в знании того, что 24-летний парень был на всех концах спектра на протяжении многих лет, а 15-летняя мобильная волна React Native предоставил фронтенд-разработчикам JS навыки, которые можно было бы расширить после того, как React от Facebook стал вирусным.

Язык Dart Choice появился на свет в 2011 году и был выпущен в 2018 году 2.0, язык разработки, первоначально выпущенный для борьбы с JavaScript , но только после этого 17 лет спустя этот трепет стал проблемой и вернулся в мир Интернета после продолжения экспериментов с Интернетом.

Разработка программирования включает в себя дополнительные вопросы, за которыми следует сравнительное введение из development language, interface development, state management, native controls.

Что касается одного из самых раздражающих слотов, то почему команда Flutter не выбрала JS, либо потому, что команда Dart находится рядом с командой Flutter, и потому что Google не хочет вдаваться в подробности об Oracle. Между тем, React Native обновляется почти 4 года, а номер версии по-прежнему не превышает 1.0.

3.1, язык

Поскольку изначально он был создан на основе Интернета, Dart и JS были в некотором смысле общими.

Как показано в следующем коде, все они поддерживают определение переменных, поддержку синтаксического сахара, поддержку () асинхронной обработки с равной цепочкой, и даже сахара / грамматика похожи (хотя это сравнение не является точным), но вы можете видеть, что они существуют как « близкие родственники »._ 22_

/// JS
    var a = 1
    async function doSomeThing() {
        var result = await xxxx()
        doAsync().then((res) => {
            console.log("ffff")
        })
    }
    function* _loadUserInfo () {
        console.log("**********************");
        yield put(UpdateUserAction(res.data));
    }

/// Dart
  var a = 1;
  void doSomeThing() async {
    var result = await xxxx();
    doAsync().then((res) {
      print('ffff');
    });
  }
  _loadUserInfo() async* {
    print("**********************");
    yield UpdateUserAction(res.data);
  }

Но они также очень разные, и самая большая разница в том, что JS - это динамический язык, а Dart - это сильный язык типов для псевдодинамических языков.

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

// Dart
String name = 'dart'; 
var otherName = 'Dart';
dynamic dynamicName = 'dynamic Dart';

Следующий код графика лучше всего отражает эту разницу в следующем примере:

  • var i Когда тип не объявлен глобально, он указывается как, так что тип не оценивается при компиляции в методе, что согласуется с явлением в JS.dymanicinit()
  • Если вы определяете в методе, который уже является сильным типом, поэтому компилятор сообщит об ошибке, но это запись на динамическом языке jS, время компиляции по умолчанию не является неправильным. var i = "";init()iStringi++

Динамические и нединамические языки имеют множество преимуществ и недостатков, например, удобство разработки JS значительно выше, чем Dart, а Dart с точки зрения безопасности типов и кода рефакторинга более надежен, чем JS.

3.2 разработка интерфейса

Native React продолжает стиль разработки React в разработке интерфейса, поддерживая scss / sass, разделение кода стилей, начиная с функционального программирования Hook React в версии 0.59 и т. Д., Тогда как react - это замена имен меток, а поддержка стилей и атрибутов сокращена из-за совместимости с платформой.

Как показано на следующем рисунке, это обычная реализация обычного компонента React Native, который наследует класс Component, передает параметры через props, и затем возвращает желаемый макет в методе render, стилизует каждый элемент управления в макете и т. Д. в основном не требует больших затрат на обучение для интерфейсных разработчиков.

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

Самая большая особенность Flutter заключается в том, что Flutter - это платформенно-независимый UI-фреймворк, который создает все во вселенной Flutter.

Как показано на следующем изображении, разработка Flutter обычно реализует страницу путем наследования Stateless widget элемента управления без состояния или Statefulwidget элемента управления без состояния, а затем реализует макет в соответствующем методе widget Build (BuildContext context), используя дочерние элементы различных widgets / children, выполняющих вложенность, передавая параметры с помощью методов построения элемента управления и, наконец, стилизовать каждый элемент управления в макете и т. д.

И для разработки элемента управления Flutter, текущий самый слот - это вложение элементов управления, а код стиля не разделен, разделение кода стиля эту проблему я не оцениваю, это действительно действительно нужно развивать, чтобы получить больше опыта, и о вложении здесь можно кое-что сделать. «Побелка»:

«Во Flutter все очень тщательно, поэтому зернистость виджета очень хорошая, например, это отдельный, и даже разделение состояния осуществляется через Inherited widget совместное использование widget,, поэтому стиль вложения кода слота уродливый». WidgetPaddingCenterWidget

Фактически, это из-за зернистости, что вы можете свободно комбинировать различные бизнес-шаблоны с помощью разных widgets,, таких как тот, который обычно используется во Flutter, который является одним из шаблонов, который официально помогает вам комбинировать, а внутренняя часть контейнера фактически составлена of Align, ConstrainedBox, DecoratedBox, Padding, Элементы управления, такие как Transform, объединены, поэтому такие вопросы, как глубина вложения, полностью контролируются человеком, а также более тонкими нюансами в отношении частоты кадров и рисования.Container

Конечно, официальные лица также улучшают опыт оптимизации написания и визуализации, и, как показано на рисунке ниже, в текущем официальном выпуске проблема будет улучшена в будущем.

Наконец, несмотря на вышеупомянутый стиль разработки, самая большая функция React Native в разработке пользовательского интерфейса связана с платформой, в то время как Flutter не зависит от платформы, например, в React Native, различные эффекты обновления раскрывающегося списка платформы и во Flutter, если вам нужны различные эффекты обновления раскрывающегося списка платформы, тогда вам нужно использовать Refresh And Cupertino Sliver Refresh Control отображает, иначе несколько сторон будут иметь согласованный эффект.

3.3, государственное управление

Как упоминалось ранее, Flutter во многом опирается на React Native, поэтому это также очень «чувство видения» в управлении состоянием, такое как вызов setState для обновления, и операция не сразу эффективна, и, конечно, они разные, как показано в следующем коде:

  • Обычно React Native необходимо инициализировать переменную внутри, а затем получить доступ через .Componentthis.statethis.state.name
  • Flutter наследует, а затем получает прямой доступ и запускает обновления в своем объекте через переменные .StatefulWidgetStatesetState
/// JS
    this.state = {
       name: ""
    };
    ···
    this.setState({
        name: "loading"
    });
    ···
    <Text>this.state.name</Text>

/// Dart
    var name = "";
    setState(() {
       name =  "loading";
    });
    ···
    Text(name)

Конечно, есть существенные различия в их внутренних реализациях, таких как React Native, на который влияет React diff, и Flutter, который isRepaintBoundary, Mark NeedsBuild, и так далее.

В стороннем управлении состоянием между ними существует очень высокая степень сходства, например, в первые дни в структуре внешнего управления состоянием, такой как: flutter_redux, fish_redux, dva_flutter, flutter_mobx и т. Д., Их дизайн идеи очень уникальны.

В то же время официальные лица Flutter также предоставляют scoped_model, provider и другие характеристики управления статусом The Flutter.

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

3.4, собственные элементы управления

При кросс-платформенной разработке вы должны говорить о доступе к поддержке исходной платформы, такой как доступ к браузеру x5 на платформе Android, доступ к платформе воспроизведения видео, доступ к среде анимации Lottie и т. Д. .

Эта потребность поддерживается React Native, и даже в сообществе он предоставил проекты, похожие на lottie-react-native. Поскольку весь процесс рендеринга React Native выполняется на нативном уровне, нетрудно получить доступ к исходным элементам управления платформы, и из-за многолетней разработки, хотя качество различных сторонних библиотек варьируется, количественное преимущество оказывается значительным.

И Flutter явно слабый, даже официальный вначале, даже не поддержка, которая на самом деле включает в себя реализацию The Question of The Sis.WebView

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

Используя Android в качестве примера, принцип работы основного уровня Ofsi на основном слое, через отображение вторичного экрана, использует то, как android управляет рисованием для слой в памяти. TextureId от рисуется, а затем передается на слой Dart , где слой Dart использует определенный и приносит textureId, а движок отображает данные, соответствующие textureId. в память .PresentationVirtualDisplaySurfaceVirtualDisplaySurfaceAndroidViewWidgetAndroidView

PlatformView Дизайн, должно быть, привел к недостаткам производительности, самым большим проявлением которых является увеличение использования памяти, но также привел к таким проблемам, как клавиатура не выскакивает и черный экран, и даже на Android производительность может быть не такой хорошей, как внешняя текстура.

Пока что доступ к собственному элементу управления Flutter все еще менее стабилен, чем React Native.

Четыре, разработка плагинов

И Native Native React, и Flutter поддерживают разработку плагинов, в отличие от плагина Npm, разработанного React Native, и плагина pub, разработанного Flutter.

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

Но проблема с использованием npm заключается в том, что слишком легко лечь, потому что сложность и глубина пакета npm зависят настолько, что вы, вероятно, не знаете что такое npm, и, помимо вопросов безопасности, наиболее интуитивным ощущением здесь является: «Почему кто-то подбегает, а я не могу бежать?» В то же время каждый проект представляет собой отдельный node_module, что немного раздражает пользователей Mac, у которых меньше места на жестком диске.

Плагины Flutter pub предоставляют унифицированное управление по умолчанию для паба, которое аналогично npm поддерживает установку ссылки git. , в то время как файлы обычно хранятся в едином месте на компьютере, а несколько элементов относятся к одному и тому же подключаемому модулю.flutter packages get

  • Win обычно находится под C: users, ’xxxxxx? AppData-Roaming-Pub-Cache path
  • каталог Mac в ..pub-cache

Если вы не можете найти каталог надстройки, вы также можете открыть каталог надстройки, просмотрев файл или открыв его следующим образом..flutter-plugins

Наконец, поговорим о надстройках Flutter и Native, которые по-разному обрабатывают собственный код:

  • После установки подключаемого модуля с собственным кодом Native React необходимо выполнить сценарии, чтобы внедрить поддержку, такую ​​как Android, эгоцентричную, и где это сделано для внесения навязчивых модификаций для доступа к ссылкам. react-native linksetting.gradlebuild.gradleMainApplication.java
  • Текст Flutter проходит через файл, который сохраняет путь ключ-значение к подключаемому модулю с собственным кодом, а сценарий для Flutter динамически вводит собственный код путем чтения и, наконец, путем создания этого игнорирования. файл для завершения импорта, процесс, который разработчик в значительной степени игнорирует, создав файл игнорирования ..flutter-pluginsGeneratedPluginRegistrant.java

Таким образом, этот блок плагинов немного лучше, чем React Native.

V. Составление и произведение

Файлы, скомпилированные Native React, в основном являются файлами в Android и IOS. bundleindex.android.bunldemain.jsbundle

Скомпилированный продукт Flutter на Android в основном состоит из: - сегмента инструкции приложения - сегмента приложения - сегмента данных виртуальной машины - сегмента инструкции виртуальной машины и т. Д. isolate_snapshot_instrisolate_snapshot_datavm_snapshot_datavm_snapshot_instr

⚠️ обратите внимание, что после версии 1.7.8 flutter под Android был скомпилирован как чистый файл so.

В IOS в первую очередь используется App.framework, который также содержит, и четыре части внутри .kDartVmSnapshotDatakDartVmSnapshotInstructionskDartIsolateSnapshotDatakDartIsolateSnapshotInstructions

Затем посмотрите на полные результаты, как показано на следующем изображении, это сравнение размера слотов пакета Release для React Native и Flutter в пустом проекте и в реальном проекте GSY.

Вы можете видеть, что Android намного больше, чем IOS при тех же условиях, что и React Native, потому что IOS поставляется с JSCore, Android требует разнообразной динамической поддержки, поэтому встроенная поддержка и здесь Android динамическая библиотека поэтому фильтруется по размеру, иначе она будет больше.ndk

Flutter и React Native - противоположность, потому что Android поставляется со skia, поэтому он намного меньше, чем IOS, у которого нет skia.

Вышеупомянутые функции аналогичны пакетам Release в проектах GSY.

Примечательно, что Google Play недавно выпустил 64-разрядную версию, а также сообщил, что прекратит обслуживание 32-разрядной версии Android Studio, в то время как поддержка формата React Native должна поддерживаться позже, чем 0.59.arm64-v8a

Что касается Flutter, укажите при упаковке .flutter build apk --release --target-platform android-arm64

Шесть, производительность

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

Прежде всего, теоретическая производительность дизайна Flutter выше, чем у React Native, что является результатом концепции дизайна фреймворка, при отсутствии OEM-виджетов прямое взаимодействие с характеристиками CPU / GPU определяет присущие ему энергетические преимущества.

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

Различные способы реализации кода также могут привести к потере производительности, например, когда skia во Flutter отрисовывает, это более требовательно к производительности, например, прозрачный композитинг, clipRRect, и т. д., которые может потребовать вызовов и очистить отрисованный графическим процессором кеш, что приведет к потере производительности, что приведет к серьезному падению кадров во время разработки .saveLayersaveLayersaveLayer

Развитие будущего

В более ранней статье «Почему Airbnb отказался от реакции?» Многие неизвестные любители дыни думали, что React Native Native заброшен, а затем официальная реклама «Facebook реконструирует React Native, переписывая большую часть нижнего», снова стабилизация вооруженных сил.

В то же время React Native начал поддерживать такие функции, как React Hook в версии 0.59, и убрал исходные элементы управления функциями платформы из внутренней части React Native для сообщества, что упростило обновление элементов управления по отдельности и стирая грань между React и Native.

Flutter Несвязанные возможности платформы пользовательского интерфейса позволили Flutter быстрее расширяться между платформами, и хотя React Native также имеет стороннюю поддержку расширения, такую ​​как Web и Pc, разработка шла медленно из-за высокой актуальности платформы, и Flutter за короткое время объявил о поддержке Интернета, которая даже распространяется на ПК и встроенные устройства.

Это предмет наибольшего беспокойства для Flutter Web. Как показано на следующем изображении, в логике дизайна Flutter вы даже не чувствуете, что разрабатываете веб-приложение.

Flutter Web сохраняет большую часть существующей мобильной логики только для того, чтобы различать на уровне Engine с возможностями dart2Js, но на данном этапе Flutter Web все еще находится на этапе предварительного просмотра технологий и не рекомендуется для использования в производственных средах.

Отсюда следует, что ни Flutter, ни React Native не будут пытаться расширить себя на большее количество платформ, одновременно упрощая разработку в своей собственной области.