深入 ‘JSI’ (JavaScript Interface)：为什么它能让 React Native 直接调用 C++ 代码而不需要通过 JSON 桥？ - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

各位同仁，女士们，先生们，

欢迎来到今天的讲座。我们今天将深入探讨一个在React Native领域具有革命性意义的技术：JavaScript Interface，简称JSI。在React Native的早期版本中，JavaScript与原生代码（Java/Kotlin for Android，Objective-C/Swift for iOS）之间的通信始终是一个性能瓶颈和复杂性来源。这个瓶颈的核心就是我们常说的“JavaScript Bridge”。而JSI的出现，彻底改变了这一格局，它使React Native能够直接调用C++代码，摆脱了JSON桥的束缚，带来了前所未有的性能提升和开发体验优化。

今天，我将带领大家详细剖析JSI的内部机制，理解它为何能够实现这一壮举，并通过大量的代码示例，让大家对JSI的强大能力有一个直观且深入的认识。

一、旧时代的回响：JavaScript Bridge的运作机制与局限

在JSI时代到来之前，React Native的架构是基于一个被称为“JavaScript Bridge”的通信机制。为了理解JSI的优越性，我们首先需要回顾一下Bridge的工作原理及其固有的局限性。

1.1 Bridge的工作原理

想象一下，你的JavaScript线程（运行在JavaScript虚拟机，如JSC或Hermes上）和你的原生UI线程（运行在主线程上，处理Android的Java/Kotlin或iOS的Objective-C/Swift UI）是两个独立的国度。它们之间不能直接对话，只能通过一位“外交官”——也就是Bridge——来传递信息。

当JavaScript需要调用一个原生模块的方法时，例如获取设备信息，它会执行以下步骤：

序列化 (Serialization)：JavaScript代码将函数名、参数等信息打包成一个JSON字符串。

// JavaScript 侧
import { NativeModules } from 'react-native';
const { MyDeviceModule } = NativeModules;

MyDeviceModule.getDeviceInfo({ includeBattery: true })
    .then(info => console.log(info))
    .catch(error => console.error(error));

这段代码在Bridge层面可能被序列化成一个类似这样的JSON对象：

{
    "module": "MyDeviceModule",
    "method": "getDeviceInfo",
    "args": [{ "includeBattery": true }],
    "callbackId": "cb_123" // 用于异步回调的ID
}

消息传递 (Message Passing)：这个JSON字符串被发送到原生Bridge。在Android上，这通常通过JNI（Java Native Interface）调用Java代码；在iOS上，通过Objective-C运行时消息发送。
反序列化 (Deserialization)：原生Bridge接收到JSON字符串后，会将其解析回原生数据结构（例如，Android的ReadableMap，iOS的NSDictionary）。
原生方法调用 (Native Method Invocation)：原生代码根据解析出的模块名和方法名，调用相应的原生方法。
结果返回 (Result Return)：原生方法执行完毕后，如果需要返回结果给JavaScript，它会将结果再次序列化成JSON字符串。
反向消息传递与反序列化：JSON字符串通过Bridge发送回JavaScript线程，JavaScript Bridge再次反序列化，并触发对应的Promise resolve或reject。

整个过程是异步的。这意味着JavaScript调用原生方法后，不能立即得到结果，而是需要等待一个异步回调。

1.2 Bridge的局限性

这种基于Bridge的通信方式虽然简单易懂，但带来了几个关键的局限：

性能瓶颈：序列化与反序列化
- 这是最核心的问题。每次JavaScript和原生代码交互，都需要将数据在JavaScript对象和JSON字符串之间来回转换。这个过程涉及到CPU密集型的字符串操作和内存分配，对于频繁或大数据量的通信，会产生显著的开销。
- 在React Native应用中，尤其是在动画、手势处理、大数据列表滚动等场景下，这种开销会导致UI卡顿，影响用户体验。
异步性限制
- Bridge的异步特性意味着JavaScript无法直接执行同步的原生调用。很多原生API本质上是同步的（例如，获取一个属性的值），但通过Bridge，它们被迫变成异步的。这增加了编程模型的复杂性，也可能导致一些操作的延迟。
- 例如，JavaScript想获取一个原生模块的配置值，如果这个值在原生侧是同步可用的，通过Bridge却必须等待一个Promise，这很不自然。
类型安全缺失
- JSON是一种无类型的数据格式。在序列化和反序列化过程中，原始的类型信息会丢失。原生代码和JavaScript代码在处理数据时，需要依赖约定好的数据结构，这容易引入运行时错误，因为编译器无法在编译时检查类型匹配。
- 例如，JavaScript期望一个数字，但原生返回了一个字符串，直到运行时才会报错。
上下文切换开销
- JavaScript线程和原生UI线程是两个独立的线程。每次通过Bridge进行通信，都涉及到线程间的切换，这本身也是一个开销。在某些情况下，甚至会涉及到三次上下文切换（JS -> 原生 -> JS）。
调试困难
- 由于通信发生在不同的线程和进程（在某些调试环境下），并且经过了序列化/反序列化，调试起来会更加复杂。调用栈在跨越Bridge时会被打断，难以追踪完整的执行路径。

为了克服这些局限，Facebook（现在的Meta）开发并引入了JSI。

二、JSI：范式革新——直接内存访问的魔法

JSI (JavaScript Interface) 的核心理念是提供一个统一的C++ API来直接操作JavaScript引擎的运行时。它不是一个“桥”，而是一种直接的、共享内存的访问机制。

2.1 JSI的核心思想：C++是JavaScript引擎的宿主

在JSI的世界观里，C++不再是JavaScript的“下游”或“对岸”，而是JavaScript引擎的“宿主”（Host）。JavaScript引擎（无论是JavaScriptCore、Hermes还是其他）被嵌入到C++应用程序中。这意味着C++代码可以直接访问JavaScript运行时中的对象、函数和值，反之亦然。

最关键的区别在于：数据不再需要序列化成字符串来回传递，而是通过C++直接操作JavaScript运行时内部的内存表示。 JavaScript对象在C++看来，是一个具有特定接口的C++对象句柄（handle），可以直接进行读写操作。

2.2 JSI的关键组件

JSI提供了一套C++类和接口，用于实现这种直接交互：

jsi::Runtime: 这是JSI的入口点，代表了JavaScript运行时实例。所有的JSI操作都通过jsi::Runtime对象进行。
jsi::Value: JSI中所有JavaScript值的统一表示。它是一个C++对象，可以持有JavaScript中的number, boolean, string, object, function, null, undefined, symbol等类型。它不是值的副本，而是对JavaScript运行时中实际值的引用。
jsi::Object: 表示JavaScript对象。你可以通过它来获取或设置属性，调用方法。
jsi::Function: 表示JavaScript函数。你可以通过它来调用JavaScript函数。
jsi::String: 表示JavaScript字符串。
jsi::Array: 表示JavaScript数组。
jsi::HostObject: 允许你将一个C++对象直接暴露给JavaScript，让JavaScript可以直接访问其属性和方法，就像它是一个普通的JavaScript对象一样。
jsi::HostFunction: 允许你将一个C++函数直接暴露给JavaScript，让JavaScript可以直接调用它。

这些C++类型都是围绕着一个核心概念设计的：它们是JavaScript引擎内部对象的C++句柄。这意味着当你通过jsi::Value操作一个JavaScript对象时，你是在直接操作JavaScript引擎内存中的那个对象，而不是操作一个序列化后的副本。

2.3 JSI如何消除JSON Bridge

JSI消除了JSON Bridge，因为它从根本上改变了通信模型：

共享内存：JavaScript运行时和原生C++代码（以及通过C++包装的原生Java/Objective-C代码）现在共享同一个内存空间。JavaScript对象不再需要通过字符串形式跨越线程边界。
直接引用：C++代码可以直接获得JavaScript对象的引用（通过jsi::Value等），并直接读取其属性、调用其方法，反之亦然。
同步调用：由于是直接访问，C++代码可以同步地调用JavaScript函数并获取返回值，JavaScript代码也可以同步地调用C++暴露的函数。
类型感知：虽然JSI本身是动态类型的（因为JavaScript是动态类型），但由于是在C++层面操作，开发者可以利用C++的类型系统来构建更安全的包装器和接口，在编译时捕获更多错误。

这种直接访问的能力，使得React Native的性能得到了质的飞跃。

三、JSI核心机制的深入剖析与代码实践

现在，让我们通过具体的代码示例来深入理解JSI是如何工作的。我们将从C++的角度来看待JavaScript运行时，并实现双向的调用。

3.1 JSI `Runtime` 的初始化与基本操作

在React Native的New Architecture中，JavaScript引擎（如Hermes）是被C++代码启动并管理的。jsi::Runtime就是这个引擎实例的C++接口。

#include <jsi/jsi.h>
#include <memory>

// 假设我们有一个Hermes Runtime的工厂函数
// 在实际React Native项目中，这个runtime由框架管理
std::unique_ptr<facebook::jsi::Runtime> createHermesRuntime();

void initializeJsiRuntime(facebook::jsi::Runtime& runtime) {
    // 1. 设置一个全局变量
    // 在JS中，你可以通过 global.myVariable 访问
    runtime.global().setProperty(runtime, "myVariable", facebook::jsi::Value(runtime, 123));

    // 2. 获取一个全局变量
    // 假设JS中存在一个 global.appName = "MyRNApp";
    facebook::jsi::Value appNameValue = runtime.global().getProperty(runtime, "appName");
    if (appNameValue.isString()) {
        std::string appName = appNameValue.asString(runtime).utf8(runtime);
        // std::cout << "App Name: " << appName << std::endl;
        // 在实际应用中，你可能会在这里将appName传递给原生UI
    }

    // 3. 执行一段JavaScript代码
    // 这在React Native中常用于加载JS bundle
    std::string jsCode = R"(
        function sayHello(name) {
            return "Hello, " + name + " from JSI!";
        }
        global.greetingFunction = sayHello;
    )";
    runtime.evaluateJavaScript(facebook::jsi::Buffer(jsCode.c_str(), jsCode.length()), "myScript.js");

    // 4. 调用刚刚定义的JavaScript函数
    facebook::jsi::Value greetingFuncValue = runtime.global().getProperty(runtime, "greetingFunction");
    if (greetingFuncValue.isObject() && greetingFuncValue.asObject(runtime).isFunction(runtime)) {
        facebook::jsi::Function greetingFunc = greetingFuncValue.asObject(runtime).asFunction(runtime);
        facebook::jsi::Value result = greetingFunc.call(runtime, facebook::jsi::String::createFromAscii(runtime, "World"));
        if (result.isString()) {
            std::string greeting = result.asString(runtime).utf8(runtime);
            // std::cout << greeting << std::endl; // 输出: Hello, World from JSI!
        }
    }
}

// 模拟的入口点
int main() {
    // std::unique_ptr<facebook::jsi::Runtime> runtime = createHermesRuntime();
    // 实际项目中，runtime由React Native框架提供
    // 假设我们已经有了 runtime 的引用
    // initializeJsiRuntime(*runtime);
    return 0;
}

3.2 JSI `Value` 类型：统一的JavaScript值表示

jsi::Value是JSI中最重要的类型之一。它是一个C++对象，可以封装任何JavaScript值（数字、字符串、布尔、对象、函数、null、undefined、symbol）。它通过内部指针直接引用JavaScript引擎内存中的实际值。

jsi::Value提供了丰富的方法来检查其类型和进行类型转换：

#include <jsi/jsi.h>
#include <iostream>

void demonstrateJsiValue(facebook::jsi::Runtime& runtime) {
    // 创建不同类型的JSI Value
    facebook::jsi::Value numValue(runtime, 123.45);
    facebook::jsi::Value boolValue(runtime, true);
    facebook::jsi::Value stringValue = facebook::jsi::String::createFromAscii(runtime, "Hello JSI");
    facebook::jsi::Value nullValue(runtime); // Default constructor creates null
    facebook::jsi::Value undefinedValue = facebook::jsi::Value::undefined();

    // 检查类型
    std::cout << "numValue is number: " << numValue.isNumber() << std::endl; // true
    std::cout << "boolValue is boolean: " << boolValue.isBool() << std::endl; // true
    std::cout << "stringValue is string: " << stringValue.isString() << std::endl; // true
    std::cout << "nullValue is null: " << nullValue.isNull() << std::endl; // true
    std::cout << "undefinedValue is undefined: " << undefinedValue.isUndefined() << std::endl; // true

    // 类型转换 (需要确认类型后安全转换)
    if (numValue.isNumber()) {
        double num = numValue.asNumber();
        std::cout << "numValue as number: " << num << std::endl; // 123.45
    }

    if (stringValue.isString()) {
        std::string str = stringValue.asString(runtime).utf8(runtime);
        std::cout << "stringValue as string: " << str << std::endl; // Hello JSI
    }

    // 从JavaScript获取一个对象
    runtime.evaluateJavaScript(facebook::jsi::Buffer("global.myObj = { name: 'JSI Object', version: 1.0 };"), "myObj.js");
    facebook::jsi::Value objValue = runtime.global().getProperty(runtime, "myObj");

    if (objValue.isObject()) {
        facebook::jsi::Object obj = objValue.asObject(runtime);
        facebook::jsi::Value nameProp = obj.getProperty(runtime, "name");
        if (nameProp.isString()) {
            std::cout << "myObj.name: " << nameProp.asString(runtime).utf8(runtime) << std::endl; // JSI Object
        }
        obj.setProperty(runtime, "newProp", facebook::jsi::Value(runtime, true));
        // 在JS中现在可以通过 global.myObj.newProp 访问 true
    }
}

3.3 将C++函数暴露给JavaScript：`jsi::HostFunction`

这是实现JavaScript直接调用C++代码的关键机制。jsi::HostFunction允许你创建一个C++函数，并将其注册到JavaScript运行时中，使其可以像普通的JavaScript函数一样被调用。

jsi::HostFunction的签名通常是：
jsi::Value (jsi::Runtime& runtime, const jsi::Value& thisValue, const jsi::Value* arguments, size_t count)

runtime: 当前的JSI运行时实例。
thisValue: JavaScript中调用该函数时的this上下文。
arguments: 一个jsi::Value指针数组，包含JavaScript传递的所有参数。
count: 参数的数量。

示例：实现一个简单的原生加法器

#include <jsi/jsi.h>
#include <iostream>
#include <string>

namespace myapp {
namespace calculator {

// C++ 实现的加法函数
facebook::jsi::Value add(
    facebook::jsi::Runtime& runtime,
    const facebook::jsi::Value& thisValue, // 通常不使用，除非是对象方法
    const facebook::jsi::Value* arguments,
    size_t count) {

    // 参数检查
    if (count != 2) {
        throw facebook::jsi::JSError(runtime, "add expects 2 arguments.");
    }
    if (!arguments[0].isNumber() || !arguments[1].isNumber()) {
        throw facebook::jsi::JSError(runtime, "add expects two numbers as arguments.");
    }

    // 获取参数并计算
    double a = arguments[0].asNumber();
    double b = arguments[1].asNumber();
    double result = a + b;

    // 返回结果
    return facebook::jsi::Value(runtime, result);
}

// C++ 实现的字符串连接函数
facebook::jsi::Value concatenateStrings(
    facebook::jsi::Runtime& runtime,
    const facebook::jsi::Value& thisValue,
    const facebook::jsi::Value* arguments,
    size_t count) {

    if (count != 2) {
        throw facebook::jsi::JSError(runtime, "concatenateStrings expects 2 arguments.");
    }
    if (!arguments[0].isString() || !arguments[1].isString()) {
        throw facebook::jsi::JSError(runtime, "concatenateStrings expects two strings as arguments.");
    }

    std::string s1 = arguments[0].asString(runtime).utf8(runtime);
    std::string s2 = arguments[1].asString(runtime).utf8(runtime);
    std::string result = s1 + s2;

    return facebook::jsi::String::createFromUtf8(runtime, (const uint8_t*)result.c_str(), result.length());
}

// 初始化JSI模块的函数
void install(facebook::jsi::Runtime& runtime) {
    // 将C++的add函数注册为JavaScript的global.nativeAdd
    runtime.global().setProperty(
        runtime,
        facebook::jsi::PropNameID::forAscii(runtime, "nativeAdd"),
        facebook::jsi::Function::createFromHostFunction(
            runtime,
            facebook::jsi::PropNameID::forAscii(runtime, "nativeAdd"),
            2, // 期望参数数量，用于JSI内部优化，不强制检查
            add // C++函数指针
        )
    );

    // 将C++的concatenateStrings函数注册为JavaScript的global.nativeConcatenate
    runtime.global().setProperty(
        runtime,
        facebook::jsi::PropNameID::forAscii(runtime, "nativeConcatenate"),
        facebook::jsi::Function::createFromHostFunction(
            runtime,
            facebook::jsi::PropNameID::forAscii(runtime, "nativeConcatenate"),
            2,
            concatenateStrings
        )
    );

    // 可以在这里设置一些常量
    runtime.global().setProperty(
        runtime,
        facebook::jsi::PropNameID::forAscii(runtime, "NATIVE_PI"),
        facebook::jsi::Value(runtime, 3.1415926535)
    );
}

} // namespace calculator
} // namespace myapp

// 模拟的React Native模块加载入口
void loadMyJSIModule(facebook::jsi::Runtime& runtime) {
    myapp::calculator::install(runtime);
    std::cout << "My JSI Module installed successfully." << std::endl;

    // 现在在JS中可以调用这些函数了
    std::string jsTestCode = R"(
        try {
            const sum = nativeAdd(10, 20);
            console.log('10 + 20 =', sum); // 30

            const combined = nativeConcatenate('Hello', 'JSI');
            console.log('Combined string:', combined); // HelloJSI

            const pi = NATIVE_PI;
            console.log('Native PI:', pi); // 3.1415926535

            // 错误处理示例
            // nativeAdd(10); // 这会在C++端抛出JSError
        } catch (e) {
            console.error('JS error caught:', e.message);
        }
    )";
    runtime.evaluateJavaScript(facebook::jsi::Buffer(jsTestCode.c_str(), jsTestCode.length()), "jsTestCode.js");
}

// main函数模拟JSI Runtime的生命周期
int main() {
    // 实际的React Native环境会提供一个JSI Runtime实例
    // 这里我们假设我们有一个 runtime 对象
    // std::unique_ptr<facebook::jsi::Runtime> runtime = createHermesRuntime();
    // loadMyJSIModule(*runtime);
    return 0;
}

3.4 将C++对象暴露给JavaScript：`jsi::HostObject`

jsi::HostObject是JSI中一个更强大的机制，它允许你将一个完整的C++对象（包含状态和方法）暴露给JavaScript。JavaScript可以像访问普通JS对象一样访问HostObject的属性和方法。

要实现HostObject，你需要继承jsi::HostObject并实现两个核心方法：

jsi::Value get(jsi::Runtime& runtime, const jsi::PropNameID& name): 当JavaScript尝试读取HostObject的属性时调用。
void set(jsi::Runtime& runtime, const jsi::PropNameID& name, const jsi::Value& value): 当JavaScript尝试设置HostObject的属性时调用。

示例：实现一个原生计数器对象

#include <jsi/jsi.h>
#include <iostream>
#include <string>
#include <memory>
#include <map>

namespace myapp {

// C++ 计数器类
class Counter {
public:
    Counter(int initialValue = 0) : value_(initialValue) {}

    int getValue() const {
        return value_;
    }

    void increment() {
        value_++;
    }

    void decrement() {
        value_--;
    }

private:
    int value_;
};

// JSI HostObject 包装器，将 Counter 暴露给 JavaScript
class JsiCounter : public facebook::jsi::HostObject {
public:
    JsiCounter(std::unique_ptr<Counter> counter) : counter_(std::move(counter)) {}

    // 当 JavaScript 尝试获取属性时调用
    facebook::jsi::Value get(facebook::jsi::Runtime& runtime, const facebook::jsi::PropNameID& name) override {
        std::string nameStr = name.utf8(runtime);

        if (nameStr == "value") {
            return facebook::jsi::Value(runtime, counter_->getValue());
        }
        if (nameStr == "increment") {
            return facebook::jsi::Function::createFromHostFunction(
                runtime,
                facebook::jsi::PropNameID::forAscii(runtime, "increment"),
                0, // 期望0个参数
                // HostFunction 的 lambda 捕获 this (JsiCounter*)
                [this](facebook::jsi::Runtime& rt, const facebook::jsi::Value&, const facebook::jsi::Value*, size_t) -> facebook::jsi::Value {
                    counter_->increment();
                    return facebook::jsi::Value::undefined();
                }
            );
        }
        if (nameStr == "decrement") {
            return facebook::jsi::Function::createFromHostFunction(
                runtime,
                facebook::jsi::PropNameID::forAscii(runtime, "decrement"),
                0,
                [this](facebook::jsi::Runtime& rt, const facebook::jsi::Value&, const facebook::jsi::Value*, size_t) -> facebook::jsi::Value {
                    counter_->decrement();
                    return facebook::jsi::Value::undefined();
                }
            );
        }

        // 如果属性不存在，返回 undefined
        return facebook::jsi::Value::undefined();
    }

    // 当 JavaScript 尝试设置属性时调用
    void set(facebook::jsi::Runtime& runtime, const facebook::jsi::PropNameID& name, const facebook::jsi::Value& value) override {
        std::string nameStr = name.utf8(runtime);

        if (nameStr == "value" && value.isNumber()) {
            // 注意：这里我们允许JS直接修改C++对象的私有状态，
            // 实际项目中可能需要更严格的访问控制。
            // 例如，可以只读，或者通过set方法进行校验。
            counter_ = std::make_unique<Counter>(static_cast<int>(value.asNumber()));
        } else {
            // 不支持设置其他属性
            // 可以选择抛出错误或忽略
            std::cerr << "Warning: Attempt to set unsupported property '" << nameStr << "' on JsiCounter." << std::endl;
        }
    }

private:
    std::unique_ptr<Counter> counter_; // 持有 C++ Counter 实例
};

// JSI模块安装函数
void installCounterModule(facebook::jsi::Runtime& runtime) {
    auto counter = std::make_unique<Counter>(100); // 初始值 100
    auto jsiCounter = std::make_shared<JsiCounter>(std::move(counter));

    // 将 JsiCounter 实例作为全局变量 global.nativeCounter 暴露给 JavaScript
    runtime.global().setProperty(
        runtime,
        facebook::jsi::PropNameID::forAscii(runtime, "nativeCounter"),
        facebook::jsi::Object::createFromHostObject(runtime, jsiCounter)
    );

    std::cout << "JSI Counter Module installed successfully." << std::endl;

    // JavaScript 测试代码
    std::string jsTestCode = R"(
        console.log('Initial nativeCounter.value:', nativeCounter.value); // 100

        nativeCounter.increment();
        console.log('After increment, nativeCounter.value:', nativeCounter.value); // 101

        nativeCounter.decrement();
        nativeCounter.decrement();
        console.log('After two decrements, nativeCounter.value:', nativeCounter.value); // 99

        // 尝试设置 value
        nativeCounter.value = 50;
        console.log('After setting value to 50, nativeCounter.value:', nativeCounter.value); // 50

        // 尝试设置不存在的属性
        nativeCounter.foo = 'bar'; // 这会在C++端打印警告
    )";
    runtime.evaluateJavaScript(facebook::jsi::Buffer(jsTestCode.c_str(), jsTestCode.length()), "jsCounterTest.js");
}

} // namespace myapp

// main函数模拟JSI Runtime的生命周期
int main() {
    // 实际的React Native环境会提供一个JSI Runtime实例
    // 这里我们假设我们有一个 runtime 对象
    // std::unique_ptr<facebook::jsi::Runtime> runtime = createHermesRuntime();
    // myapp::installCounterModule(*runtime);
    return 0;
}

通过HostObject，JavaScript可以像操作普通JS对象一样，读取value属性，调用increment和decrement方法，并且这些操作直接作用于底层的C++ Counter实例，没有任何序列化/反序列化的开销。

3.5 C++ 调用 JavaScript 函数

除了JavaScript调用C++，JSI也支持C++调用JavaScript函数，这对于实现回调或事件机制非常有用。

#include <jsi/jsi.h>
#include <iostream>
#include <string>

namespace myapp {

// C++ 端持有 JavaScript 回调函数
facebook::jsi::Function jsCallbackRef;

// C++ 函数，用于在一定条件下触发 JavaScript 回调
facebook::jsi::Value triggerJsCallback(
    facebook::jsi::Runtime& runtime,
    const facebook::jsi::Value& thisValue,
    const facebook::jsi::Value* arguments,
    size_t count) {

    if (count != 1 || !arguments[0].isString()) {
        throw facebook::jsi::JSError(runtime, "triggerJsCallback expects one string argument.");
    }

    // 检查 jsCallbackRef 是否有效
    if (jsCallbackRef.isObject() && jsCallbackRef.asObject(runtime).isFunction(runtime)) {
        // 调用 JavaScript 回调函数，并传递一个参数
        jsCallbackRef.call(runtime, arguments[0]); // 将C++收到的参数直接转发给JS回调
        return facebook::jsi::Value(runtime, true); // 表示调用成功
    } else {
        std::cerr << "Warning: JavaScript callback not set or invalid." << std::endl;
        return facebook::jsi::Value(runtime, false); // 表示调用失败
    }
}

// JSI模块安装函数
void installCallbackModule(facebook::jsi::Runtime& runtime) {
    // 注册一个C++函数，用于接收并存储JavaScript回调函数
    runtime.global().setProperty(
        runtime,
        facebook::jsi::PropNameID::forAscii(runtime, "setNativeCallback"),
        facebook::jsi::Function::createFromHostFunction(
            runtime,
            facebook::jsi::PropNameID::forAscii(runtime, "setNativeCallback"),
            1, // 期望一个参数
            // HostFunction 的 lambda 捕获 jsCallbackRef
            [&jsCallbackRef](facebook::jsi::Runtime& rt, const facebook::jsi::Value&, const facebook::jsi::Value* arguments, size_t count) -> facebook::jsi::Value {
                if (count == 1 && arguments[0].isObject() && arguments[0].asObject(rt).isFunction(rt)) {
                    // 存储 JavaScript 函数的引用
                    // jsi::Function 的构造函数会创建对 JS 对象的引用计数，防止被垃圾回收
                    jsCallbackRef = arguments[0].asObject(rt).asFunction(rt);
                    std::cout << "JavaScript callback registered." << std::endl;
                    return facebook::jsi::Value(rt, true);
                } else {
                    throw facebook::jsi::JSError(rt, "setNativeCallback expects a function as argument.");
                }
            }
        )
    );

    // 注册一个C++函数，用于触发之前存储的JavaScript回调
    runtime.global().setProperty(
        runtime,
        facebook::jsi::PropNameID::forAscii(runtime, "triggerNativeEvent"),
        facebook::jsi::Function::createFromHostFunction(
            runtime,
            facebook::jsi::PropNameID::forAscii(runtime, "triggerNativeEvent"),
            1, // 期望一个参数
            triggerJsCallback
        )
    );

    std::cout << "JSI Callback Module installed successfully." << std::endl;

    // JavaScript 测试代码
    std::string jsTestCode = R"(
        // 1. 定义一个JavaScript回调函数
        function myJsCallback(message) {
            console.log('[JS Callback] Received message from C++:', message);
        }

        // 2. 将JavaScript回调函数注册到C++
        setNativeCallback(myJsCallback);

        // 3. 模拟C++端在某个时刻触发事件
        // 实际上，这可能是在原生代码中异步发生
        console.log('Triggering native event from JS...');
        triggerNativeEvent('Hello from C++ event!');

        // 再次触发
        setTimeout(() => {
            triggerNativeEvent('Another message after 1 second!');
        }, 1000);
    )";
    runtime.evaluateJavaScript(facebook::jsi::Buffer(jsTestCode.c_str(), jsTestCode.length()), "jsCallbackTest.js");
}

} // namespace myapp

// main函数模拟JSI Runtime的生命周期
int main() {
    // 实际的React Native环境会提供一个JSI Runtime实例
    // 这里我们假设我们有一个 runtime 对象
    // std::unique_ptr<facebook::jsi::Runtime> runtime = createHermesRuntime();
    // myapp::installCallbackModule(*runtime);
    return 0;
}

这个例子展示了C++如何接收一个JavaScript函数作为参数，并将其存储起来，然后在稍后的某个时刻（这里是立即或通过setTimeout模拟异步）调用它。这正是许多React Native事件系统（如事件发射器）底层的工作原理。

四、JSI在React Native新架构中的核心地位

JSI不仅仅是一个底层的通信机制，它是React Native“新架构”（New Architecture）的基石。新架构旨在解决旧架构中Bridge带来的所有性能和维护性问题，并为React Native的未来发展铺平道路。

4.1 新架构概述：无Bridge、同步、类型安全

React Native的新架构主要由以下几个核心组件构成，它们都深度依赖JSI：

JSI (JavaScript Interface)：我们正在讨论的核心，用于JS和C++之间的直接通信。
Codegen (代码生成器)：用于自动生成JavaScript接口和C++类型定义，确保JS和原生模块之间的类型安全。
TurboModules (原生模块)：基于JSI的新一代原生模块系统，取代了旧的NativeModules。它允许同步调用，并且是类型安全的。
Fabric (UI管理器)：基于JSI的新一代UI渲染系统，取代了旧的UIManager。它允许JS直接操作C++端的UI视图树，实现高性能的UI更新。

4.2 TurboModules：JSI赋能的新原生模块

在旧架构中，原生模块通过Bridge暴露，所有通信都是异步的。在TurboModules中，Codegen会根据一个统一的规范（例如，NativeMyModule.js文件中的Flow/TypeScript类型定义）生成C++头文件和胶水代码。这些生成的C++代码会使用JSI将JavaScript的调用直接路由到C++实现。

Codegen的流程简述：

开发者定义一个JavaScript接口文件（例如NativeCalculator.js），使用Flow或TypeScript语法定义模块的属性和方法及其类型。

// NativeCalculator.js
// @flow
import type { TurboModule } from 'react-native/Libraries/TurboModule/RCTExport';
import * as React from 'react';

export interface Spec extends TurboModule {
    add(a: number, b: number): number;
    subtract(a: number, b: number): number;
    multiply(a: number, b: number): Promise<number>; // 异步示例
    // ... 其他方法
}

// Export your module for Codegen
export default (React.NativeModules.NativeCalculator as Spec);

Codegen工具读取这个JS文件，并生成对应的C++头文件（NativeCalculator.h），其中包含了C++接口和JSI注册逻辑。它还会生成Android的Java接口和iOS的Objective-C++接口。

// 假设Codegen生成的C++接口 (简化版)
namespace facebook {
namespace react {
class JSI_EXPORT NativeCalculatorSpec : public TurboModule {
protected:
    NativeCalculatorSpec(std::shared_ptr<CallInvoker> jsInvoker);
public:
    virtual double add(double a, double b) = 0;
    virtual double subtract(double a, double b) = 0;
    virtual jsi::Value multiply(jsi::Runtime &runtime, double a, double b) = 0; // JSI Value for async
};
} // namespace react
} // namespace facebook

开发者在C++中实现NativeCalculatorSpec接口。

// NativeCalculator.cpp
#include "NativeCalculator.h" // Codegen生成的头文件

namespace facebook {
namespace react {

class NativeCalculator : public NativeCalculatorSpec {
public:
    NativeCalculator(std::shared_ptr<CallInvoker> jsInvoker)
        : NativeCalculatorSpec(std::move(jsInvoker)) {}

    double add(double a, double b) override {
        return a + b;
    }

    double subtract(double a, double b) override {
        return a - b;
    }

    // 异步方法，返回Promise
    jsi::Value multiply(jsi::Runtime &runtime, double a, double b) override {
        // 在实际应用中，这里会启动一个异步操作
        // 然后通过 jsInvoker->invokeAsync 或 jsInvoker->invokeSync
        // 将结果或错误传递回JS
        // 这里为了简化，我们直接返回一个Promise，并立即 resolve
        auto promise = runtime.global().getPropertyAsFunction(runtime, "Promise");
        auto resolve = promise.getPropertyAsFunction(runtime, "resolve");
        auto reject = promise.getPropertyAsFunction(runtime, "reject");

        double result = a * b; // 模拟异步计算
        return promise.callAsConstructor(runtime, resolve.call(runtime, jsi::Value(runtime, result)));
    }
};

// JSI Module注册函数
std::shared_ptr<TurboModule> NativeCalculatorModuleProvider(
    std::shared_ptr<CallInvoker> jsInvoker) {
    return std::make_shared<NativeCalculator>(std::move(jsInvoker));
}

} // namespace react
} // namespace facebook

在React Native应用启动时，JSI运行时会将这些C++实现的模块直接注册到JavaScript全局对象中，或者通过一个代理对象暴露。JavaScript可以直接通过NativeCalculator.add(1, 2)调用C++函数。

TurboModules的优势：

同步调用：如果C++函数是同步的，JavaScript现在可以同步地调用它并立即获得返回值，无需Promise。这简化了API设计，并提高了性能。
类型安全：Codegen强制了JS和C++之间的类型契约，减少了运行时错误。
性能提升：彻底移除了序列化/反序列化开销。
惰性加载：TurboModules可以按需加载，而不是在应用启动时一次性加载所有模块，减少了启动时间。

4.3 Fabric：JSI赋能的UI渲染系统

Fabric是React Native的新一代渲染器，它同样利用JSI实现了高性能的UI管理。在旧架构中，UI操作需要将一个大的UI指令批处理（也是JSON格式）通过Bridge发送到原生UI线程，然后原生代码解析并更新视图。这个过程是异步的，并且开销巨大。

Fabric的核心思想是：

共享的C++ UI树：JavaScript不再通过JSON指令描述UI，而是直接操作一个C++表示的UI视图树。这个C++视图树是跨平台的，并由JSI进行内存管理。
同步布局与渲染：布局计算（Yoga引擎）在C++中执行，并且可以同步地更新C++ UI树。
直接访问原生视图：C++ UI树中的节点可以直接映射到平台的原生视图实例（Android的View，iOS的UIView）。
精细化更新：JSI允许JavaScript直接对C++ UI树进行细粒度的修改，而不是发送整个批处理。这意味着更少的内存拷贝和更快的更新。

通过JSI，JavaScript可以：

创建C++ ShadowNode（对应JS组件实例）。
设置ShadowNode的属性。
在ShadowNode树上执行插入、删除、更新操作。
触发布局计算。
将ShadowNode树同步到原生平台视图。

这使得UI更新更加流畅，特别是对于复杂的列表、手势和动画，性能提升尤为显著。

4.4 Bridge vs. JSI：核心差异对比

特性	JavaScript Bridge (旧架构)	JSI (新架构)
通信机制	消息队列，JSON序列化/反序列化，跨线程传递	直接内存访问，C++句柄操作JavaScript引擎内部对象
通信模式	异步	同步（大部分场景），也可实现异步
数据传递	JSON字符串的拷贝	C++对象句柄，直接引用JavaScript内存中的值
性能	序列化/反序列化开销大，上下文切换频繁，性能瓶颈明显	无序列化开销，直接访问，显著提升性能
类型安全	运行时弱类型，容易出错	Codegen生成C++接口，实现编译时类型检查，提高健壮性
开发体验	原生模块开发流程复杂，调试跨越Bridge困难	原生模块开发更接近C++原生开发，调试更直接，但对C++技能要求更高
UI渲染	通过Bridge发送UI指令批处理给原生UIManager	通过C++ Shadow Tree直接管理UI，Fabric渲染器直接与C++视图树交互
JavaScript引擎	独立于原生代码，通过Bridge通信	嵌入在C++代码中，C++作为其宿主，直接操作其运行时

五、JSI的优势总结

综合以上分析，JSI为React Native带来了以下显著优势：

极致的性能提升：
- 零序列化/反序列化开销：这是最大的性能收益。消除了数据在JSON字符串和原生对象之间来回转换的CPU和内存成本。
- 同步调用：允许JavaScript直接、同步地调用原生C++函数并获取结果，无需等待异步Promise，极大地简化了某些API的设计，并减少了延迟。
- 共享内存访问：C++可以直接访问JavaScript引擎的内部数据结构，如对象、数组、字符串，而无需复制。
增强的类型安全：
- 通过Codegen工具链，JSI能够为JavaScript和C++之间生成类型安全的接口。在编译时捕获类型不匹配的错误，而不是在运行时才发现，提高了代码的健壮性和可维护性。
更灵活的架构设计：
- JSI使得React Native能够构建更灵活、更强大的架构，例如TurboModules和Fabric，它们是未来React Native发展的基石。
- 允许更直接地集成其他C++库，而无需复杂的JNI/Objective-C桥接。
更低的内存占用：
- 减少了JSON字符串的创建和销毁，以及数据复制，从而降低了应用的内存占用。
统一的调试体验：
- 由于通信发生在同一个C++进程空间内，理论上可以实现更连贯的调试体验，调用栈不再因跨越Bridge而被截断。
更好的原生集成能力：
- 开发者可以直接利用C++的强大能力，将高性能的计算逻辑、图形渲染、物理引擎等直接暴露给JavaScript，而无需担心性能损耗。

六、JSI带来的挑战与考量

虽然JSI带来了巨大的优势，但它也并非没有挑战：

C++知识门槛：JSI模块的开发需要深入的C++知识，包括内存管理、智能指针、JSI API的使用等。对于习惯于JavaScript或Java/Objective-C的React Native开发者来说，这无疑增加了学习曲线。
构建系统复杂性：集成C++代码和Codegen工具链会使React Native项目的构建系统变得更加复杂，尤其是在跨平台构建时。
调试复杂性：虽然理论上调试更连贯，但同时调试JavaScript和底层的C++代码仍然具有挑战性，需要专业的C++调试工具。
生态系统迁移：大量的现有原生模块需要迁移到TurboModules，这需要时间和社区的努力。

七、JSI的未来展望

JSI的引入是React Native发展史上一个里程碑式的事件。它不仅解决了长期困扰的性能问题，更为React Native的未来打开了无限可能：

更强大的原生能力：开发者可以更轻松地将复杂的C++库集成到React Native应用中，例如游戏引擎、机器学习模型、音视频处理库等。
跨平台原生模块：通过C++编写一次JSI模块，可以在iOS、Android甚至未来的桌面和WebAssembly平台（如果JS引擎支持）上复用，极大地提高了代码复用率。
更好的WebAssembly集成：JSI作为JavaScript引擎的C++宿主接口，天然地与WebAssembly兼容。未来，React Native应用可以直接在C++层与WebAssembly模块交互，而无需经过JavaScript层，进一步提升性能。
React Native Everywhere：JSI的通用性使其能够更好地支持React Native向更多平台扩展，例如桌面应用（macOS, Windows）、嵌入式设备等。

通过今天的讲座，我们深入探讨了JSI的原理、机制和在React Native新架构中的核心地位。我们看到了它是如何通过直接内存访问，彻底颠覆了JavaScript与原生代码之间的通信模式，从而解决了JSON Bridge固有的性能瓶颈和复杂性问题。JSI不仅仅是一项技术改进，它更是React Native走向高性能、高效率、多平台未来的基石。虽然它带来了更高的C++学习门槛，但其带来的巨大性能和架构优势，无疑将驱动React Native走向一个全新的时代。

感谢大家的聆听。