Принципы и практика React Native

внешний интерфейс React Native
Принципы и практика React Native

Введение в React Native

Что такое React Native?

React Native — это среда JavaScript с открытым исходным кодом, выпущенная Facebook в сентябре 2015 года, которая позволяет разработчикам использовать JavaScript и React для разработки кроссплатформенных мобильных приложений. Он не только сохраняет эффективность разработки React, но также имеет хороший опыт работы с нативными приложениями в сочетании с кроссплатформенными преимуществами Virtual DOM для достижения истинного смысла:Learn Once,Write Anywhere.

Примечание: логотип не HD, разве это не модель атомарной структуры? Подразумеваете, что React (Native) — это корень всех зол?

Особенности React Native

Кроссплатформенность

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

Начать быстро

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

родной опыт

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

Горячее обновление

Приложение, разработанное React Native, поддерживает горячее обновление, потому что продукт React Native представляет собой файл пакета, который по сути является кодом JS. Когда приложение запускается, оно отправляется на сервер для получения файла пакета. Нам нужно только обновить пакетный файл, так что приложение не нужно обновлять.Вам нужно снова пойти в магазин, чтобы загрузить тело пакета, чтобы обновить версию, и разработчики могут повторять функции или исправлять ошибки без восприятия пользователя. Однако стоит отметить, что AppStore запрещает горячие обновления, в том числе вызов частных API, вмешательство в нативный код и изменение поведения приложений.

Принципы React Native

JavaScriptCore

JavaScriptCore — это механизм JavaScript, часто называемый виртуальной машиной, специально разработанный для интерпретации и выполнения кода JavaScript. В React Native JavaScriptCore отвечает за синтаксический анализ и выполнение JS-кода, сгенерированного пакетом.

JS Engine

React Native нужна среда выполнения JS, потому что React Native скомпилирует код JS приложения в файл JS (x x.bundle). Цель платформы React Native — интерпретировать и запустить этот файл сценария JS. API, расширенный Native, затем вызовите Native метод напрямую через мост, самый простой, такой как рисование интерфейса пользовательского интерфейса и сопоставление виртуального DOM с реальными компонентами пользовательского интерфейса.

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

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

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

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

Помимо React Native, как чистая нативная сторона взаимодействует с JS? Посмотрим, как это реализовано в iOS.

Создайте контекст JS в Native:

// 创建一个ctx的JS上下文
JSContent *ctx = [[JSContent alloc] init];
// 创建一个变量name
[ctx evaluateScript:@"var name = 'Hellen'"];
// 创建一个方法
[ctx evaluateScript:@"var hello = function(name) { return 'hello ' + name }"];

Собственные вызовы методов JavaScript:

// 通过ctx上下文对象，获取到hello方法
JSValue *helloFUnction = ctx[@"hello"];
// 运行js方法
JSValue *greetings = [helloFunction callWithArguments:@[@"bytedancers"]; // hello bytedancers

Следовательно, пока код JavaScript предоставляет переменную в глобальном контексте JS, Native может получить ее и запустить код JS.

Чтобы вызвать Native из JavaScript, вам сначала нужно предоставить переменную глобальному контексту JS на стороне Native.Вы можете получить и выполнить этот метод в глобальной переменной JavaScript:

ctx[@"createdByNative"] = ^(NSString *name) {
    // do something
    return someResult
}

React Native также использует возможности JS Engine для выполнения JS на основе JavaScriptCore, но взаимодействует через Bridge.JS не будет напрямую ссылаться на экземпляр объекта слоя Native, а Native не будет напрямую ссылаться на экземпляр объекта слоя JS (в React Native Все интермодуляции Native и JS связаны через самые основные методы уровня Bridge).

Hermes Engine

Hermes — это новое поколение JS Engine, выпущенное Facebook в 2019 году. Hermes — это небольшой и легкий движок JavaScript, оптимизированный для запуска React Native на Android: сокращено время запуска приложения, уменьшено использование памяти и уменьшен размер приложения. Кроме того, поскольку он реализован с использованием стандартов JavaScript, его легко интегрировать в приложения React Native.

Hermes vs JavaScriptCore vs V8

После официальной проверки данных ключевые показатели, предложенные командой Faceback, были значительно улучшены по сравнению с исходным решением JavaScriptCore. Прежде всего, по размеру файла продукта, необходимая поэтому библиотека, от которой зависит RN, Hermes примерно на 16% меньше, чем JavaScriptCore, а V8 намного больше, чем Hermes и JavaScriptCore.

Bridge

В React Native взаимодействие между нативным концом и JavaScript осуществляется через мост, функция моста — предоставить расширение нативного интерфейса для JS Engine, встроенного в React Native, для вызова JS. Все локальное хранилище, доступ к ресурсам изображения, рисование графического изображения, 3D-ускорение, доступ к сети, эффект вибрации, NFC, собственный контрольный рисунок, карта, позиционирование, уведомление и т. д. инкапсулируются в интерфейсы JS через мост и вводятся в JS Engine для вызовов JS. . Теоретически любой эффект, которого можно добиться с помощью нативного кода, можно инкапсулировать в компоненты и методы, которые могут вызываться JS через Bridge, и предоставляться RN в виде модулей JS.

RCTRootView

Если вы хотите использовать React Native для нативных проектов, вам нужно использовать RCTRootView, где React Native загружается и может рассматриваться как контейнер.

// RCTRootView.m

- (void)javaScriptDidLoad:(NSNotification *)notification
{
  RCTAssertMainQueue();
  RCTBridge *bridge = notification.userInfo[@"bridge"];
  if (bridge != _contentView.bridge) {
    [self bundleFinishedLoading:bridge];
  }
}

- (void)bundleFinishedLoading:(RCTBridge *)bridge
{
  // 省略创建RCTRootContentView...

  [self runApplication:bridge];

  // 省略添加一个RCTRootContentView...
}

- (void)runApplication:(RCTBridge *)bridge
{
  NSString *moduleName = _moduleName ?: @""; // 这里是@"NewProject"
  NSDictionary *appParameters = @{
    @"rootTag": _contentView.reactTag,
    @"initialProps": _appProperties ?: @{},
  };

  [bridge enqueueJSCall:@"AppRegistry"
                 method:@"runApplication"
                   args:@[moduleName, appParameters]
             completion:NULL];
}

Приведенный выше исходный код (iOS) показывает, что RCTRootView на самом деле делает следующее:

  • Создал инициализацию экземпляра RCTBridge, отвечающего за связь React Native и Native.
  • Инициализирует RCTRootContentView, который фактически отображает представление.
  • Передайте необходимые параметры (moduleName, params) в метод runApplication AppRegistry на стороне JS через метод runApplication, тем самым запустив функцию React Native. (В React native корневой компонент необходимо зарегистрировать с помощью метода registerComponent AppRegistry. Так называемый корневой компонент — это входной файл Native to JS)

Процесс рендеринга:

Как собственные модули в React Native доступны для JS?

Мы знаем, что React Native может вызывать методы на стороне Native, и пока сторона Native следует определенным правилам, методы могут подвергаться вызовам JS:

// iOS端原生代码
#import <Foundation/Foundation.h>
#import <React/RCTBridgeModule.h>

@interface NativeLogModule : NSObject<RCTBridgeModule>

@end

#import "NativeLogBridge.h"

@implementation NativeLogModule
RCT_EXPORT_MODULE()
RCT_EXPORT_METHOD(nativeLog:(id)obj) {
  NSLog(@"%@",obj);
}
@end

// JS端调用
import { NativeModules } from 'react-native';
NativeModules.NativeLogModule.nativeLog('从JS侧来的消息');

Как видите, приведенный выше код используетRCT_EXPORT_MODULE()Макрос предоставляет JS класс Native в виде модуля, а затем используетRCT_EXPORT_METHODПредоставляя Native методы для JS и, наконец, ссылаясь на модуль непосредственно на стороне JS, вы можете напрямую вызывать открытые методы для связи с Native.

Как React Native реализует связь Native JS?

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

Нативные вызовы JS

В React Native методы JS могут бытьglobal.batchedBridge.callFunctionReturnFlushedQueueЭтот метод вызывается, поэтому на стороне Native вам нужно только привязать метод в объекте global.batchedBridge в React Native к методу JSIExecutor на стороне Native (по сути, указатель Native указывает на функцию JS)

JSIExecutor::callFunctionReturnFlushedQueue_ = global.batchedBridge.callFunctionReturnFlushedQueue

CallFunctionReturnFlushedQueue на стороне Native в основном выполняет следующие действия:

  • Метод вызывается через moduleid и methodid, по этим двум параметрам можно найти модуль метода, определенный на стороне JS.

JS вызывает натив

Когда JS вызывает модуль Native, он вызывает глобальный метод, предоставленный Native: nativeFlushQueueImmediate, и передает параметры moduleName, methodName и обратного вызова, которые будут вызываться этому методу, а затем этот метод уведомляет нативную сторону, чтобы найти соответствующий модуль и реализация.

Virtual DOM

Прежде чем мы познакомимся с Virtual DOM, давайте посмотрим, как работает браузер:

  • Браузер имеет полный набор элементов управления пользовательского интерфейса, стили и функции реализованы в соответствии со стандартом HTML.
  • Браузер может анализировать HTML и CSS, сообщать браузеру, какой тип элемента управления пользовательского интерфейса следует генерировать с помощью HTML, и описывать внешний вид элемента управления пользовательского интерфейса (размер, фон, макет и т. д.) с помощью файлов стилей CSS.
  • Основная роль браузера заключается в анализе HTML и CSS для формирования деревьев рендеринга и рендеринга страницы с помощью Render Engine.

После понимания того, как работают браузеры, как работает Virtual DOM?

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

Реагировать (собственный) виртуальный DOM

Как в React Native преобразовать виртуальный DOM в реальный пользовательский интерфейс?

Во-первых, в React объект, используемый для представления свойства dom, имеет следующие ключевые свойства:

var ele = {
    ...
    type: type, // 元素的类型
    key: key, // 元素key标示
    ref: ref, // 元素的引用
    props: props, // 元素的参数，包含children
    ...
}

// example 1
<div>hello</div>
// 会被描述为

{type: 'div',
    props: {
        children: ['hello']
    }
}

// example 2
<CustomerComponents />
// 会被描述为
{
    type: CustomerComponents
}

Виртуальный DOM в React делит реальный DOM на следующие типы:

  • тип атома

    • Тип — строка, структура не подлежит декомпозиции, рендеринг поддерживается нижним слоем платформы.
    • На стороне браузера: атомарные типы представлены в виде примитивных тегов, поддерживаемых браузером, таких как div, ul, li, p, a, span и т. д.
    • На стороне Native: атомарные типы представлены в виде различных базовых компонентов пользовательского интерфейса на стороне Native, таких как RCTText, RCTView и т. д.

  • Тип комбинации

    • Тип представляет собой конструктор функции, который дает нам возможность настраивать пользовательский интерфейс и поведение элементов.Когда модуль визуализации встречает элемент комбинированного типа, он использует свой конструктор для создания экземпляра и запускает метод рендеринга для получения новый элемент (атомарного или составного типа), а затем взять элемент для продолжения рендеринга или декомпозиции.
    • Определяемые пользователем элементы компонентов.

Рендерер

На стороне браузера и на стороне Native средство рендеринга, используемое Virtual DOM для рендеринга реального DOM в React (Native), отличается:

На стороне браузера:

// 文本类型渲染器工作原理
mountComponent: function(
    transaction,
    hostParent,
    hostContainerInfo,
    context
) {
    // 获取到DOM对象
    var lazyTree = DOMLazyTree(ownerDocument.createDocumentFragment());
    // 判断是不是文本类型
    if (this._stringText) {
        DOMLazyTree.queueChild(
            lazyTree,
            DOMLazyTree(ownerDocument.createTextNode(this._stringText))
        );
    }
    return lazyTree
}

// 原子类型渲染器工作原理
mountComponent: function(
    transaction,
    hostParent,
    hostContainerInfo,
    context
) {
    var ownerDocument = hostContainerInfo._ownerDocument;
    // 创建原子type类型dom
    var el = 
ownerDocument.createElement(this._currentElement.type)
    ...

    // 创建子节点
    this._createInitialChildren(transaction, props, context, lazyTree);
    ...
}

// 组合类型渲染器工作原理
mountComponent: function(
    transaction,
    hostParent,
    hostContainerInfo,
    context
) {

    // 运行构造器，获取到组件实例

    var inst = this._constructComponent({
        doConstruct,
        publicProps,
        publicContext,
        updateQueue,
    });

    ...

    // 获取到虚拟dom
    if (renderedElement === undefined) {
      renderedElement = this._renderValidatedComponent();
    }

    ...

    // 获取到分解后的组件类型（ReactXXXComponent,可以看作是三种组件类型的集合）
    this._renderedComponent = this._instantiateReactComponent(
      renderedElement
    );
    // 最后通过ReactReconciler.mountComponent间接的调用不同类型的渲染器的mountComponent方法获取到生产的node节点，并返回。
    var markup = ReactReconciler.mountComponent(
      this._renderedComponent,
      rootID,
      transaction,
      this._processChildContext(context)
    );

    return markup
}

Посмотрите на следующую структуру кода:

На родной стороне:

В браузере JavaScript может вызывать DOM API для завершения создания пользовательского интерфейса, в то время как в React Native для создания представлений используется UI Manager.На основе Virtual DOM React Native инкапсулирует логику создания представлений на разных платформах.Разные платформы вызовите диспетчер пользовательского интерфейса через мост, чтобы создать различные собственные представления.

три нити

В React Native действительно выполняются три важных потока: теневой поток, поток пользовательского интерфейса и поток JS.

JS-поток:По сути, это поток JavaScript, который отвечает за поток взаимодействия между JS и нативным кодом.Поскольку JS — это однопоточная модель, ему нужен отдельный поток для управления, а взаимодействие между JS и Native асинхронно.

Shadow thread: этот поток отвечает за нативную раскладку и предоставляется движку йоги.

UI thread: это можно рассматривать как основной поток, который можно рассматривать как поток диспетчера пользовательского интерфейса, отвечающий за взаимодействие со страницей и логику управления отрисовкой.

Горячее обновление

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

Инкрементное обновление (распаковка)

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

Текущее отраслевое решение — пакет метро, ​​официально предоставляемый facebook:facebook.github.io/metro/

Реагировать на нативную практику

Среда установки (для macOS)

Требуемая среда для iOS: Node, Watchman, Xcode, CocoaPods.

Требуемая среда Android: Node, Watchman, JDK и Android Studio.

Вы можете обратиться к официальному сайту React Native:реагировать native.capable/docs/Everyday Physical…

Примечание-1: Для последней версии AppStore Xcode может потребоваться системная версия, и не нужно обновлять систему.Студенты, которые хотят установить предыдущую версию Xcode, могут посмотреть здесь:developer.apple.com/download/mo…

Примечание-2: при установке зависимостей CocoaPods загрузка может завершиться ошибкой.Вы можете попробовать переключить зеркальный источник:Зеркало. Дыхание. Его четырехлетний план. Квота. Талант/помощь/коко АП…

Примечание-3: Пожалуйста, внимательно прочитайте руководство на официальном веб-сайте, потому что опыт, который проект все еще не может запустить после его запуска от начала до конца, действительно сумасшедший.

Структура каталогов

Каталог проекта, сгенерированный с помощью официальных шаблонов React Native, выглядит следующим образом:

├── android # Android runtime
├── iOS # iOS runtime
├── node_modules # 项目依赖
├── app.json # 描述app 信息
├── App.js # React Native 代码
├── index.js # 入口文件，这个文件里面调用了AppRegistry.registerComponent，注册React Native组件提供给Native
├── package.json # 依赖信息和版本信息
├── ...
├── ...
├── ...

Реализовать всплывающую анимацию

Требуемые компоненты: View, Text, TouchableOpacity, StyleSheet, Dimensions, Animated. Для чего они используются?

Представление: самый простой компонент пользовательского интерфейса. Представление — это контейнер, который поддерживает макет Flexbox и может рассматриваться как div в браузере.

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

TouchableOpacity: компонент кнопки, обеспечивающий полупрозрачный эффект при нажатии, который реализуется встроенной поддержкой и запускает событие onPress при нажатии.

StyleSheet: предоставляет абстракцию, подобную таблице стилей CSS, которая может использовать объекты JS для написания стилей CSS.

Размеры: инкапсулирует свойства ширины и высоты устройства. Как правило, ширину и высоту элемента можно установить на их основе для адаптации к экрану.

Animated: библиотека анимации, которая предоставляет пользователям возможность вводить и выводить свойства анимации для реализации некоторых простых анимаций.

Сначала добавьте кнопку на страницу, при нажатии на которую отображается полноэкранное модальное всплывающее окно:

// 控制弹窗显示隐藏
const [visiable, setVisiable] = useState(false);

<View style={styles.container}>
  <Header /> {/* 官方组件，忽略 */}
  <View style={styles.buttonWrap}>
    <TouchableOpacity
      style={styles.button}
      onPress={() => setVisiable(true)}>
      <Text style={styles.buttonText}>Button</Text>
    </TouchableOpacity>
  </View>
  <Modal visiable={visiable} onClose={() => setVisiable(false)} />
</View>

const styles = StyleSheet.create({
  container: {
    width: '100%',
    height: '100%',
  },
  buttonWrap: {
    alignItems: 'center',
    justifyContent: 'center',
    marginTop: 20,
  },

  button: {
    width: 100,
    height: 30,
    backgroundColor: 'skyblue',
    borderRadius: 5,
    alignItems: 'center',
    justifyContent: 'center',
  },

  buttonText: {
    color: '#fff',
  },
});

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

<Animated.View style={{...styles.container, backgroundColor: back}}>
  <Animated.View
    style={[styles.box, {transform: [{scale: content}], opacity: content}]}>
    <TouchableOpacity style={styles.button} onPress={handleClose}>
      <Text style={styles.buttonText}>Close</Text>
    </TouchableOpacity>
  </Animated.View>
</Animated.View>

const styles = StyleSheet.create({
  container: {
    position: 'absolute',
    left: 0,
    top: 0,
    flex: 1,
    width: '100%',
    height: '100%',
    alignItems: 'center',
    justifyContent: 'center',
  },
  box: {
    position: 'relative',
    opacity: 0,
    width: 200,
    height: 200,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  button: {
    width: 100,
    height: 30,
    backgroundColor: 'skyblue',
    borderRadius: 5,
    alignItems: 'center',
    justifyContent: 'center',
  },
  buttonText: {
    color: '#fff'
 },
});

Они выглядят так:

Теперь осталось только добавить свойства анимации, а пока нам нужно использовать Animated:

 // 创建一个渐变值。
 const [fade] = useState(new Animated.Value(0));

Мы создали переменную затухания с помощью Animated. Эта переменная является изменяемой. Мы можем использовать метод Animated.timing().start() для изменения значения затухания.

Animated.timing(
      fade, // 动画中的变量值
      {
        toValue: 100, // 需要变成的值
        duration: 400, // 变化执行时长，0-100的变化需要400毫秒
        useNativeDriver: false, // 是否使用原生动画引擎，如果开启，部分属性是不支持原生渲染的，会报错，所以一般会关闭这个选项。
      },
    ).start();

Теперь мы хотим сопоставить значение затухания (0 ~ 100) с изменением цвета фона от rgba (0, 0, 0, 0) до rgba (0, 0, 0, 0,8) и шкалой масштаба элемента (0) ~ масштаб( 1):

// 背景颜色过渡
let back = fade.interpolate({
    inputRange: [0, 100],
    outputRange: ['rgba(0,0,0,0)', 'rgba(0,0,0,.8)'],
    });
// 内容缩放过渡
let content = fade.interpolate({
    inputRange: [0, 100],
    outputRange: [0, 1],
});

Метод fade.interpolate может отображать линейный входной диапазон в линейный выходной диапазон и поддерживает функцию плавности.

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

Эффект:

Обобщить и расширить

Недостатки React Native

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

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

Будущее React Native

Что такое ЖСИ?

В RN JSI является аббревиатурой интерфейса JavaScript, JSI представляет собой облегченную универсальную структуру API, которая может применяться к любой виртуальной машине JavaScript, позволяя различным платформам легко использовать различные механизмы синтаксического анализа JavaScript (виртуальная машина JavaScript содержит механизм JavaScript).

JSI написан на C++ для замены исходного моста и повышения эффективности связи.0.58реализовано в.

В настоящее время в RN виртуальная машина JavaScript, используемая по умолчанию, — это JavascriptCore.С помощью JSI мы можем легко напрямую вызывать собственные методы представлений пользовательского интерфейса или собственных модулей, реализованные в Java/ObjC (аналогично RPC), вместо использования исходного метода. мост к очереди для сообщений, возвращаемых собственным уровнем.

Что может JSI?

JSI сам по себе не является частью React Native — это унифицированный, легкий, общий уровень интерфейса, который работает с любой (теоретически) виртуальной машиной JavaScript.

Когда JSI был добавлен к новой архитектуре, это сделало возможным несколько действительно важных улучшений.

Первое улучшение интуитивно понятно — javaScriptCore теперь можно легко заменить другими движками, другие варианты включают ChakraCore от Microsoft и V8 от Google.

Второе улучшение, которое, возможно, является краеугольным камнем всей новой архитектуры, заключается в том, что с помощью JSI JavaScript может хранить ссылку на хост-объект C++ и выполнять к нему вызовы.

Это означает: JavaScript и Native действительно знают друг друга, и им больше не нужно передавать сообщения через сериализацию JSON, что устранит проблему блокировки Bridge.

По сравнению с другими кросс-энд технологиями

Flutter vs React Native

Во-первых, давайте кратко разберемся в предыстории Flutter и React Native, Flutter — это комплект для разработки программного обеспечения (SDK), разработанный Google. Это помогает разработчикам создавать приложения для iOS и Android с единой кодовой базой. React Native служит той же цели, что и Flutter, но по-другому. Он был создан Facebook и основан на React для создания мобильных приложений без ущерба для внешнего вида приложения.

опыт разработки

React Native продолжает стиль разработки React в разработке интерфейса, поддерживает css-in-js (на самом деле js используется для написания css) и поддерживает функциональное программирование React Hook после версии 0.59.Большая часть разработки связана с построением стиля интерфейсы. , собственная возможность реализуется клиентом или мостом.

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

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

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

продукт

React Native генерирует файлы пакетов, которые на самом деле являются файлами сценариев JS. После компиляции Flutter Android в основном генерирует некоторые сегменты инструкций приложения, сегменты данных, сегменты данных виртуальной машины и сегменты инструкций. iOS — это App.framework, который также является некоторыми собственными наборами данных. .

Собственные возможности и производительность

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

Наконец, в настоящее время они неотличимы друг от друга, и у каждого есть свои сильные стороны.

Добро пожаловать в "Байтовый внешний интерфейс ByteFE"

Контактный адрес электронной почты для доставки резюме "tech@bytedance.com"

Категории