面试题：React中如何初步实现WebAssembly与React组件的通信

准备WebAssembly模块
- 使用C、C++等语言编写代码，通过Emscripten等工具将其编译为WebAssembly模块（.wasm文件）。例如，假设用C语言编写了一个简单的加法函数：
```
int add(int a, int b) {
    return a + b;
}
```
然后使用Emscripten编译：emcc -o add.js add.c -s WASM=1，这会生成add.wasm和add.js。

在React项目中导入WebAssembly模块

在React组件文件（如App.js）中，首先导入WebAssembly实例化函数。如果使用的是Emscripten生成的代码，add.js会提供实例化函数。

import init from './add.js';

在React组件的生命周期方法（如useEffect）或类组件的componentDidMount中进行实例化：

import React, { useEffect } from'react';
import init from './add.js';

const App = () => {
    useEffect(() => {
        const runWasm = async () => {
            const wasmModule = await init();
            // 这里的wasmModule就是WebAssembly实例，包含导出的函数
        };
        runWasm();
    }, []);

    return <div>WebAssembly Integration Example</div>;
};

export default App;

调用WebAssembly模块中的函数并传递简单数据类型

假设WebAssembly模块导出了一个add函数，在React组件中可以这样调用并传递简单数据类型（如整数）：

import React, { useEffect } from'react';
import init from './add.js';

const App = () => {
    useEffect(() => {
        const runWasm = async () => {
            const wasmModule = await init();
            const result = wasmModule.add(3, 5);
            console.log('Addition result:', result);
        };
        runWasm();
    }, []);

    return <div>WebAssembly Integration Example</div>;
};

export default App;

这里add函数接受两个整数参数并返回一个整数结果。如果WebAssembly模块导出的函数接受其他简单数据类型（如浮点数），同样可以直接传递：

// C代码中修改为浮点数加法
float add_float(float a, float b) {
    return a + b;
}

编译后在React中调用：

import React, { useEffect } from'react';
import init from './add.js';

const App = () => {
    useEffect(() => {
        const runWasm = async () => {
            const wasmModule = await init();
            const result = wasmModule.add_float(3.5, 5.5);
            console.log('Float addition result:', result);
        };
        runWasm();
    }, []);

    return <div>WebAssembly Integration Example</div>;
};

export default App;

从WebAssembly向React传递数据
- WebAssembly模块可以通过返回值向React传递简单数据类型，如上述add函数返回加法结果。如果需要传递更复杂的数据结构（如数组），WebAssembly通常通过在堆上分配内存并返回指向该内存的指针来实现。React端需要根据WebAssembly模块提供的内存视图（通常是WebAssembly.Memory实例）来读取这些数据。例如，假设WebAssembly模块导出一个函数生成一个整数数组：
```
#include <emscripten/emscripten.h>
#include <stdlib.h>

EMSCRIPTEN_KEEPALIVE int* generate_array(int length) {
    int* arr = (int*)malloc(length * sizeof(int));
    for (int i = 0; i < length; i++) {
        arr[i] = i;
    }
    return arr;
}
```
在React中调用并读取数据：
```
import React, { useEffect } from'react';
import init from './array.js';

const App = () => {
    useEffect(() => {
        const runWasm = async () => {
            const wasmModule = await init();
            const length = 5;
            const ptr = wasmModule.generate_array(length);
            const memory = wasmModule.memory;
            const view = new Int32Array(memory.buffer, ptr, length);
            const array = Array.from(view);
            console.log('Generated array:', array);
        };
        runWasm();
    }, []);

    return <div>WebAssembly Array Example</div>;
};

export default App;
```
这里通过WebAssembly.Memory创建一个Int32Array视图来读取WebAssembly堆上的数据。同时，要注意在WebAssembly中正确管理内存，避免内存泄漏。例如，在上述C代码中，如果不再需要arr数组，应该调用free(arr)释放内存。在React端，可以通过WebAssembly导出的释放函数来实现。

面试题：React中如何初步实现WebAssembly与React组件的通信

知识考点

面试题答案