Недавно я работал над проектом React Native и дошел до того, что мне нужно было настроить фреймворк для тестирования. Для этого мне нужно было глубоко погрузиться в конвейер ресурсов и среды выполнения React Native, чтобы лучше понять, что происходит за кулисами.
Среда выполнения React
Как известно большинству разработчиков, React Native либо запускает ваш код Javascript на сервере на вашем компьютере (во время разработки), либо запускает код на самом телефоне в производственной среде.
Но как он передает сообщение из нативного кода в код Javascript, интересно и сложно. Вот что я узнал сегодня:
RCTContextExecutor
RCTContextExecutor - это исполнитель JavaScript для производственных приложений. Он запускает React Native с помощью движка Apple JavaScriptCore на устройстве. JavascriptCore - это довольно забавная технология, о которой вы можете прочитать про NSHipster (ссылка).
RCTContextExecutor хранит указатель на RCTJavaScriptContext, который является основным механизмом выполнения для JS. Когда пакетные вызовы Javascript поступают из RCTBridge (или, точнее, RCTBatchedBridge), они передаются в среду Javascript, которая интерпретирует соответствующее сообщение в кодировке JSON и возвращает ответ. Мы видим точку, в которой сообщение JSON помещается в JavaScriptCore:
JSValueRef result = JSEvaluateScript(strongSelf->_context.ctx, execJSString, NULL, NULL, 0, &jsError);
RCTWebSocketExecutor
RCTWebSocketExecutor - это исполнитель JavaScript для разработки. Он берет код, который обычно запускался бы на JavaScriptCore (как объяснено выше), и отправляет их через соединение WebSocket (например, библиотека SocketRocket от Square: ссылка) на вкладку браузера Chrome, открытую на вашем компьютере разработчика.
Между iOS и React Native в браузере находится прокси-сервер NodeJS WebSocket. Прокси-сервер Websocket получает сообщения с директивами в кодировке JSON от устройства (см. Проверка трафика React Native WebSocket: ссылка) и отправляет их всем зарегистрированным слушателям. Сообщения Websocket содержат директивы о том, какие модули искать в памяти, и ему передается соответствующая информация.
N->JS: RCTEventEmitter.receiveTouches([“topTouchStart”,[{“target”:382,”pageY”:212.5,”locationX”:54.5,”changedTouches”:null,”locationY”:72.5,”identifier”:1,”pageX”:54.5,”touches”:null,”timestamp”:39555908.379419}],[0]])
RCTWebViewExecutor
RCTWebViewExecutor создан для использования консоли отладки Safari. Он использует движок Javascript UIWebView для поддержки React Native JS. Это может показаться странным, но его преимущество в том, что затем вы можете отлаживать в консоли разработчика Safari.
Ниже мы можем увидеть, где сообщения JSON помещаются в веб-просмотр для интерпретации:
NSString *ret = [_webView stringByEvaluatingJavaScriptFromString:execString];
Заключение
Есть еще много информации, но я устал и хочу выпить пива. Я в настоящее время являюсь экспертом во всем этом, поэтому, пожалуйста, оставляйте исправления, пояснения или комментарии.
