Как получать данные из нативного слоя (например C++ приложения) в React-приложение?

Для получения данных из нативного C++ кода в React-приложении, которое выполняется в браузере, стандартным современным решением является использование WebAssembly (Wasm). WebAssembly — это бинарный формат инструкций, который позволяет выполнять код, написанный на языках вроде C/C++, с почти нативной производительностью прямо в браузере.

Основной подход: компиляция в WebAssembly

Инструмент Emscripten компилирует C/C++ код в модуль .wasm и генерирует JavaScript-«клей» (glue code), который обеспечивает загрузку и взаимодействие. В React-приложении вы загружаете этот модуль и вызываете его экспортированные функции.

Пример шагов и кода

1. Напишите C++ код с функциями, которые нужно экспортировать, используя макросы Emscripten.

// native_lib.cpp
#include 

// Экспортируемая функция, возвращающая число
EMSCRIPTEN_KEEPALIVE
int getValueFromNativeLayer() {
    // Здесь может быть сложная логика на C++
    return 42;
}

// Функция, принимающая параметр и возвращающая результат
EMSCRIPTEN_KEEPALIVE
int processData(int input) {
    return input * 2;
}

2. Скомпилируйте код в WebAssembly с помощью Emscripten.

emcc native_lib.cpp \
     -o native_lib.js \
     -s EXPORTED_FUNCTIONS="['_getValueFromNativeLayer', '_processData']" \
     -s MODULARIZE=1 -s EXPORT_ES6=1

Эта команда создаст файлы native_lib.wasm и native_lib.js.

3. Интегрируйте модуль в React-компонент.

import React, { useEffect, useState } from 'react';

function App() {
    const [nativeValue, setNativeValue] = useState(null);

    useEffect(() => {
        // Динамически импортируем сгенерированный модуль
        import('./native_lib.js').then(module => {
            // После загрузки модуля вызываем экспортированную функцию
            const value = module._getValueFromNativeLayer();
            setNativeValue(value);

            // Пример вызова функции с параметром
            const processed = module._processData(10);
            console.log('Processed data:', processed);
        });
    }, []);

    return (
        
            Значение из нативного слоя (C++):
            {nativeValue !== null ? nativeValue : 'Загрузка...'}
        
    );
}

export default App;

Альтернативные методы и применение

• Node.js Native Addons + Electron: Если ваше React-приложение упаковано в Electron (десктопное приложение), вы можете создавать Native Addons на C++ и вызывать их через Node.js API. Это дает прямой доступ к системным ресурсам.
• Серверный прокси (Backend-for-Frontend): C++ приложение работает как отдельный сервис (например, на localhost). React-приложение отправляет HTTP/WebSocket запросы на серверное приложение (на Node.js/Python), которое, в свою очередь, взаимодействует с C++ библиотекой через Foreign Function Interface (FFI). Этот подход отделяет нативную логику от фронтенда.

Вывод: Используйте компиляцию C++ в WebAssembly, когда вам нужна высокая производительность вычислений (например, обработка изображений, физические симуляции) прямо в браузере. Для десктопных приложений на базе Electron предпочтительнее Native Addons, так как они предоставляют полный доступ к системе. Серверный прокси подходит, когда нативный код должен работать на отдельном сервере или требует доступа к ресурсам, недоступным из браузера.