解析 React Native 的 ‘JSI’ (JavaScript Interface)：如何避开 JSON 序列化实现 JS 与 C++ 的同步调用？

解析 React Native 的 ‘JSI’ (JavaScript Interface)：如何避开 JSON 序列化实现 JS 与 C++ 的同步调用？

各位同仁，大家好。今天我们将深入探讨 React Native 中一个革命性的技术——JSI，即 JavaScript Interface。长久以来，跨语言通信的性能瓶颈一直是移动应用开发中的一个挑战，尤其是在 JavaScript 与 C++（或 Objective-C/Java）之间。React Native 早期依赖的“Bridge”架构，虽然成功实现了跨平台开发，但其固有的异步特性和基于 JSON 序列化的数据传输机制，在追求极致性能和响应速度的场景下，逐渐显现出局限性。JSI 的诞生，正是为了打破这些限制，开启一个全新的、高性能、同步的 JS-Native 通信时代。

一、跨语言通信的旧瓶颈：Bridge 架构的挑战

在深入 JSI 之前，我们有必要回顾一下 React Native 早期所依赖的 Bridge 架构。这种架构的核心思想是通过一个消息队列在 JavaScript 线程和原生（Native）线程之间传递消息。当 JavaScript 需要调用一个原生模块时，它会将函数名、参数等信息序列化成一个 JSON 字符串，然后通过 Bridge 将这个字符串发送到原生端。原生端接收到消息后，会反序列化 JSON 字符串，解析出函数名和参数，然后执行相应的原生代码。执行结果（如果需要）也会被序列化成 JSON 字符串，再通过 Bridge 返回给 JavaScript 端。

Bridge 架构的特点：

1. 异步通信： 消息传递是异步的。JavaScript 发送请求后，不会立即得到响应，需要等待原生端处理完毕并返回结果。这对于 UI 渲染、网络请求等天然异步的操作来说是合理的，但对于一些需要立即返回结果的计算密集型任务，或者需要频繁调用的场景，就会引入显著的延迟。
2. JSON 序列化/反序列化： 每次数据传输都需要将 JavaScript 对象转换为 JSON 字符串，再将 JSON 字符串转换回原生对象，反之亦然。这个过程涉及到大量的 CPU 密集型操作（字符串编码/解码）和内存分配/释放，尤其是在传输大量数据或复杂数据结构时，开销会非常大。
3. 消息队列瓶颈： 所有的通信都必须经过一个共享的消息队列。在高并发或高频率的通信场景下，消息队列可能会成为性能瓶颈，导致消息延迟甚至丢失（尽管 React Native 的 Bridge 机制相对健壮）。

这些挑战使得 React Native 在某些特定场景下难以达到原生应用的性能水准，比如需要高性能图形处理、实时数据分析、或者与底层硬件进行高频同步交互的场景。

二、JSI 登场：直接内存访问的革命

JSI，全称 JavaScript Interface，是 React Native 迈向新架构的核心基石。它并非一个新的通信协议，而是一种全新的跨语言交互范式。JSI 的核心思想是：让 JavaScript 运行时（JSRuntime）能够直接访问 C++ 对象和函数，反之亦然，而无需任何序列化或异步消息传递。

这意味着什么？

• 同步调用： JavaScript 可以直接、同步地调用 C++ 函数，就像调用普通的 JavaScript 函数一样。C++ 函数的执行结果会立即返回给 JavaScript。
• 零序列化开销： 数据不再通过 JSON 字符串传输。JavaScript 和 C++ 之间传递的是对内存中同一份数据的引用，或者进行的是直接的类型转换，而不是复制和格式转换。
• 更高性能： 避免了序列化/反序列化、消息队列排队等开销，显著提升了通信效率和响应速度。
• 更紧密的集成： 使得 JavaScript 能够更深入地与原生能力融合，例如直接操作 C++ 对象的成员、调用其方法，为构建高性能的自定义模块和渲染器提供了无限可能。

JSI 并非 React Native 独有，它源自 Facebook 对 JavaScript 引擎（如 Hermes）的底层优化，旨在提供一个通用的、高效的 JavaScript 运行时与宿主环境（Host Environment）交互的接口。在 React Native 中，这个宿主环境就是我们的 C++ 层（最终会桥接到 Objective-C/Java）。

三、JSI 的核心机制：共享运行时与宿主对象/函数

JSI 的威力源于其对 JavaScript 运行时的直接操作。在 React Native 的 JSI 架构中，C++ 代码能够获得一个指向 JavaScript 运行时实例的引用（jsi::Runtime）。通过这个 Runtime 对象，C++ 就可以与 JavaScript 环境进行深度交互。

3.1 jsi::Runtime：JavaScript 运行时的句柄

jsi::Runtime 是 JSI 的核心接口，它代表了当前的 JavaScript 执行环境。通过 jsi::Runtime 对象，C++ 代码可以：

• 创建 JavaScript 值（jsi::Value）。
• 创建 JavaScript 对象（jsi::Object）、数组（jsi::Array）、函数（jsi::Function）。
• 获取全局对象（global）。
• 执行 JavaScript 代码。
• 将 C++ 对象和函数暴露给 JavaScript。

所有的 JSI 操作都需要一个 jsi::Runtime& 引用作为上下文。

3.2 jsi::Value：统一的数据类型表示

jsi::Value 是 JSI 中所有 JavaScript 值的通用表示。它可以是 undefined、null、boolean、number、string、object、symbol 或 function。

当 C++ 代码需要与 JavaScript 交互数据时，都会通过 jsi::Value 进行封装。重要的是，这种封装并非序列化，而是一种轻量级的类型转换或引用。例如，一个 C++ int 类型的值可以被转换为 jsi::Value(runtime, 123)，它在 JavaScript 侧表现为一个 Number 类型。反之，当 C++ 从 JavaScript 获取一个 jsi::Value 时，可以检查其类型并转换为 C++ 的原生类型（如 toNumber(), toString()）。

jsi::Value 的主要方法：

• isUndefined(), isNull(), isBool(), isNumber(), isString(), isObject()
• getBool(), getNumber(), getString(runtime), getObject(runtime)
• equals(runtime, otherValue)
• strictEquals(runtime, otherValue)

示例：创建和操作 jsi::Value

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

using namespace facebook;
using namespace jsi;

void demonstrateValues(Runtime& runtime) {
    // 创建一个数字
    Value numValue(runtime, 123.45);
    std::cout << "Number Value: " << numValue.getNumber() << std::endl; // 123.45

    // 创建一个布尔值
    Value boolValue(runtime, true);
    std::cout << "Boolean Value: " << (boolValue.getBool() ? "true" : "false") << std::endl; // true

    // 创建一个字符串
    String jsiString = String::createFromUtf8(runtime, "Hello JSI");
    Value stringValue(runtime, jsiString);
    std::cout << "String Value: " << stringValue.getString(runtime).utf8(runtime) << std::endl; // Hello JSI

    // 创建一个空值
    Value nullValue = Value::createNull(runtime);
    std::cout << "IsNull: " << nullValue.isNull() << std::endl; // true

    // 创建一个未定义值
    Value undefinedValue = Value::createUndefined(runtime);
    std::cout << "IsUndefined: " << undefinedValue.isUndefined() << std::endl; // true

    // 从全局对象获取一个属性（例如 Math 对象）
    Object globalObject = runtime.global();
    Value mathValue = globalObject.getProperty(runtime, "Math");
    if (mathValue.isObject()) {
        Object mathObject = mathValue.getObject(runtime);
        Function randomFunc = mathObject.getPropertyAsFunction(runtime, "random");
        Value randomResult = randomFunc.call(runtime); // 调用 Math.random()
        std::cout << "Math.random() result: " << randomResult.getNumber() << std::endl;
    }
}

// 注意：在实际React Native项目中，runtime的获取和传递由框架管理
// 这里的 demonstrateValues 只是一个概念性示例
// 实际调用需要一个有效的 jsi::Runtime 实例

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

jsi::HostObject 是 JSI 中最强大的特性之一，它允许 C++ 对象在 JavaScript 运行时中表现得像一个普通的 JavaScript 对象。当 JavaScript 访问这个“宿主对象”的属性或调用其方法时，JSI 会将这些操作转发给底层的 C++ 对象来处理。

要创建一个 jsi::HostObject，你需要：

1. 定义一个 C++ 类，它将是你在 JavaScript 中希望操作的“实体”。
2. 定义一个包装类，它继承自 jsi::HostObject。这个包装类将负责实现 get、set 和 call 方法。
   • jsi::Value get(Runtime& runtime, const PropNameID& name)：当 JavaScript 尝试读取宿主对象的属性时，JSI 会调用此方法。name 参数是属性的名称。
   • void set(Runtime& runtime, const PropNameID& name, const Value& value)：当 JavaScript 尝试写入宿主对象的属性时，JSI 会调用此方法。
   • jsi::Value call(Runtime& runtime, const PropNameID& name, const Value* arguments, size_t count)：当 JavaScript 尝试调用宿主对象的方法时，JSI 会调用此方法。name 是方法名，arguments 是参数数组，count 是参数数量。

通过这些方法，你可以将 C++ 对象的成员变量映射为 JavaScript 属性，将 C++ 成员函数映射为 JavaScript 方法。

工作原理：

当 JavaScript 代码执行 myHostObject.someProperty 或 myHostObject.someMethod() 时，JavaScript 引擎会识别出 myHostObject 是一个 HostObject，然后调用 C++ 侧相应的 get 或 call 方法。这些方法直接在 C++ 内存空间中操作，无需任何序列化。参数（如果有）通过 jsi::Value 传递，返回值也通过 jsi::Value 返回。

示例：创建一个简单的 C++ 类并在 JS 中使用

首先，定义一个我们要暴露的 C++ 类：

// MyNativeCalculator.h
#pragma once
#include <string>

class MyNativeCalculator {
public:
    MyNativeCalculator(std::string name) : name_(std::move(name)), value_(0) {}

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

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

    void setValue(double val) {
        value_ = val;
    }

    double getValue() const {
        return value_;
    }

    std::string getName() const {
        return name_;
    }

private:
    std::string name_;
    double value_;
};

接下来，创建 MyNativeCalculatorHostObject 包装器：

// MyNativeCalculatorHostObject.h
#pragma once
#include <jsi/jsi.h>
#include <memory>
#include "MyNativeCalculator.h"

using namespace facebook;
using namespace jsi;

class MyNativeCalculatorHostObject : public HostObject {
public:
    MyNativeCalculatorHostObject(std::unique_ptr<MyNativeCalculator> calculator)
        : calculator_(std::move(calculator)) {}

    // 实现 HostObject 的 get 方法
    Value get(Runtime& runtime, const PropNameID& name) override;

    // 实现 HostObject 的 set 方法
    void set(Runtime& runtime, const PropNameID& name, const Value& value) override;

    // 实现 HostObject 的 call 方法 (不直接调用，而是通过 get 返回 HostFunction)
    // 通常我们不会直接实现 call，而是通过 get 返回一个 HostFunction
    // 但为了演示 HostObject 的完整性，这里可以简化理解为：
    // 如果属性是一个函数，get 会返回一个包装了 C++ 方法的 HostFunction
    // 实际的 call 操作是发生在 HostFunction 上的
    // 为了简化，我们直接在 get 中处理方法名，返回一个临时的 HostFunction
    // 这种做法在实际生产中通常会更结构化地处理，例如提前创建好所有方法的 HostFunction 对象
    // 并存储在一个 map 中，get 时直接返回
private:
    std::unique_ptr<MyNativeCalculator> calculator_;
};

// MyNativeCalculatorHostObject.cpp
#include "MyNativeCalculatorHostObject.h"
#include <vector>

namespace {
    // 辅助函数：将 jsi::Value 转换为 double，如果失败则抛出异常
    double getDoubleFromValue(jsi::Runtime& runtime, const jsi::Value& value, const std::string& argName) {
        if (!value.isNumber()) {
            throw jsi::JSError(runtime, "Argument '" + argName + "' must be a number.");
        }
        return value.getNumber();
    }
}

Value MyNativeCalculatorHostObject::get(Runtime& runtime, const PropNameID& name) {
    auto propName = name.utf8(runtime);

    // 属性访问
    if (propName == "name") {
        return Value(runtime, String::createFromUtf8(runtime, calculator_->getName()));
    }
    if (propName == "value") {
        return Value(runtime, calculator_->getValue());
    }

    // 方法访问
    if (propName == "add") {
        // 返回一个 HostFunction，它封装了 MyNativeCalculator::add 方法
        return Function::createFromHostFunction(runtime,
            name, // 函数名
            2,    // 参数数量
            [this](Runtime& rt, const Value& thisVal, const Value* args, size_t count) -> Value {
                if (count < 2) {
                    throw JSError(rt, "add method requires 2 arguments.");
                }
                double a = getDoubleFromValue(rt, args[0], "first argument");
                double b = getDoubleFromValue(rt, args[1], "second argument");
                return Value(rt, calculator_->add(a, b));
            }
        );
    }
    if (propName == "subtract") {
        return Function::createFromHostFunction(runtime,
            name,
            2,
            [this](Runtime& rt, const Value& thisVal, const Value* args, size_t count) -> Value {
                if (count < 2) {
                    throw JSError(rt, "subtract method requires 2 arguments.");
                }
                double a = getDoubleFromValue(rt, args[0], "first argument");
                double b = getDoubleFromValue(rt, args[1], "second argument");
                return Value(rt, calculator_->subtract(a, b));
            }
        );
    }
    if (propName == "setValue") {
        return Function::createFromHostFunction(runtime,
            name,
            1,
            [this](Runtime& rt, const Value& thisVal, const Value* args, size_t count) -> Value {
                if (count < 1) {
                    throw JSError(rt, "setValue method requires 1 argument.");
                }
                double val = getDoubleFromValue(rt, args[0], "first argument");
                calculator_->setValue(val);
                return Value::createUndefined(rt); // 无返回值
            }
        );
    }
    if (propName == "getValue") {
        return Function::createFromHostFunction(runtime,
            name,
            0,
            [this](Runtime& rt, const Value& thisVal, const Value* args, size_t count) -> Value {
                return Value(rt, calculator_->getValue());
            }
        );
    }

    return Value::createUndefined(runtime); // 属性不存在
}

void MyNativeCalculatorHostObject::set(Runtime& runtime, const PropNameID& name, const Value& value) {
    auto propName = name.utf8(runtime);
    if (propName == "value") {
        if (!value.isNumber()) {
            throw JSError(runtime, "Property 'value' must be a number.");
        }
        calculator_->setValue(value.getNumber());
    } else {
        // 对于其他属性，我们可以选择抛出错误或忽略
        throw JSError(runtime, "Cannot set property '" + propName + "' on MyNativeCalculatorHostObject.");
    }
}

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

jsi::HostFunction 允许你将一个 C++ 函数（通常是一个 lambda 表达式或一个函数指针）直接注册到 JavaScript 运行时中，使其在 JavaScript 中表现为一个可调用的函数。

创建 jsi::HostFunction：

Function::createFromHostFunction 方法用于创建一个 HostFunction。它接受以下参数：

• runtime：当前的 JSI 运行时实例。
• name：在 JavaScript 中该函数的名称（jsi::PropNameID）。
• paramCount：期望的参数数量。
• hostFunction：一个 C++ lambda 表达式或函数对象，它接受 (Runtime& rt, const Value& thisVal, const Value* args, size_t count) 参数，并返回 jsi::Value。

示例：直接暴露一个 C++ 函数

// JSIInstaller.cpp (假设在一个模块的安装文件中)
#include <jsi/jsi.h>
#include <memory>
#include "MyNativeCalculatorHostObject.h" // 包含之前定义的 HostObject

using namespace facebook;
using namespace jsi;

// 这是一个独立的 C++ 函数，我们想在 JS 中调用
double multiply(double a, double b) {
    return a * b;
}

void installJSIModule(Runtime& runtime) {
    // 1. 暴露一个简单的 HostFunction
    // 在 JS 中可以这样调用：NativeModule.multiply(2, 3)
    auto multiplyHostFunction = Function::createFromHostFunction(runtime,
        PropNameID::forAscii(runtime, "multiply"), // JS 中的函数名
        2, // 期望参数数量
        [](Runtime& rt, const Value& thisVal, const Value* args, size_t count) -> Value {
            if (count < 2) {
                throw JSError(rt, "multiply requires 2 arguments.");
            }
            double a = args[0].getNumber();
            double b = args[1].getNumber();
            return Value(rt, multiply(a, b)); // 调用 C++ 的 multiply 函数
        }
    );
    runtime.global().setProperty(runtime, "multiplyNative", multiplyHostFunction);

    // 2. 暴露一个 HostObject 的实例
    // 在 JS 中可以这样使用：const myCalc = new NativeModule.MyCalculator("MyFirstCalc");
    // const result = myCalc.add(10, 20);
    auto calculatorInstance = std::make_unique<MyNativeCalculator>("GlobalCalculator");
    auto hostObject = std::make_shared<MyNativeCalculatorHostObject>(std::move(calculatorInstance));
    // 将 HostObject 注册到全局对象，命名为 'globalCalculator'
    runtime.global().setProperty(runtime, "globalCalculator", Object::createFromHostObject(runtime, hostObject));

    // 3. 另一种方式，提供一个工厂函数来创建 HostObject
    // 在 JS 中可以这样使用：const myCalc = NativeModule.createCalculator("MyNewCalc");
    auto createCalculatorFunc = Function::createFromHostFunction(runtime,
        PropNameID::forAscii(runtime, "createCalculator"),
        1,
        [](Runtime& rt, const Value& thisVal, const Value* args, size_t count) -> Value {
            if (count < 1 || !args[0].isString()) {
                throw JSError(rt, "createCalculator requires a string argument for name.");
            }
            std::string name = args[0].getString(rt).utf8(rt);
            auto newCalculator = std::make_unique<MyNativeCalculator>(name);
            auto newHostObject = std::make_shared<MyNativeCalculatorHostObject>(std::move(newCalculator));
            return Object::createFromHostObject(rt, newHostObject);
        }
    );
    runtime.global().setProperty(runtime, "createNativeCalculator", createCalculatorFunc);
}

// 实际在 React Native 中，这个 installJSIModule 会在应用的启动过程中被调用
// 通常通过注册一个 C++ AppSetup hook 来完成

JavaScript 中的使用：

// JS 文件 (例如 App.js 或某个模块的 JS 文件)

// 调用 HostFunction
const product = global.multiplyNative(5, 4);
console.log('Product:', product); // Output: Product: 20

// 使用 HostObject 实例
const globalCalc = global.globalCalculator;
console.log('Global Calculator Name:', globalCalc.name); // Output: Global Calculator Name: GlobalCalculator
globalCalc.setValue(100);
console.log('Global Calculator Value:', globalCalc.value); // Output: Global Calculator Value: 100
const sum = globalCalc.add(10, 20);
console.log('Sum:', sum); // Output: Sum: 30
const diff = globalCalc.subtract(50, 15);
console.log('Difference:', diff); // Output: Difference: 35

// 使用工厂函数创建新的 HostObject
const customCalc = global.createNativeCalculator("CustomCalc");
console.log('Custom Calculator Name:', customCalc.name); // Output: Custom Calculator Name: CustomCalc
const customSum = customCalc.add(7, 3);
console.log('Custom Sum:', customSum); // Output: Custom Sum: 10

四、如何避开 JSON 序列化：JSI 的核心秘密

现在，我们终于可以正面回答文章的核心问题：JSI 如何避开 JSON 序列化实现 JS 与 C++ 的同步调用？

答案在于 JSI 的设计哲学：直接内存访问和运行时类型转换。

1. 共享内存空间与运行时句柄：
   JSI 工作的核心前提是 JavaScript 运行时（JSRuntime）和 C++ 宿主环境共享同一块内存空间。C++ 代码通过 jsi::Runtime 句柄，获得了直接操作 JavaScript 堆的能力。这意味着当 C++ 创建一个 jsi::Value 时，它实际上是在 JavaScript 堆上创建了一个 JavaScript 引擎可以理解的原生值（如 Number、String、Object），而不是在 C++ 堆上创建一个 C++ 对象并将其序列化。

2. jsi::Value 的本质：类型转换而非序列化：
   当一个 C++ double 转换为 jsi::Value(runtime, someDouble) 时，JSI 并不是将 someDouble 变成一个字符串 "123.45"，而是直接在 JavaScript 运行时中创建一个 Number 类型的 JavaScript 值，并将 someDouble 的二进制表示或其等价物直接存储到该 JavaScript 值的内部结构中。
   反之，当 JavaScript 传递一个 Number 给 C++ HostFunction 或 HostObject 的 get/set/call 方法时，C++ 接收到的是一个 jsi::Value。通过 value.getNumber()，JSI 会直接从 JavaScript 值的内部结构中提取出 double 类型的二进制表示，而无需解析任何字符串。

3. jsi::HostObject 和 jsi::HostFunction 的代理机制：
   HostObject 和 HostFunction 的设计是关键。它们在 JavaScript 运行时中扮演着一个“代理”或“句柄”的角色。

   • 当你在 JavaScript 中获得一个 HostObject 实例时，你得到的不是 C++ 对象的 JSON 序列化版本，而是一个特殊的 JavaScript 对象，它内部持有一个指向 C++ 宿主对象的指针（或智能指针）。
   • 当你访问 hostObject.property 或调用 hostObject.method() 时，JavaScript 引擎会识别这是一个 HostObject，然后不是在 JS 堆中查找属性或方法，而是直接通过其内部的 C++ 指针，调用 C++ 侧 HostObject 的 get 或 call 方法。
   • 在 get 或 call 方法中，C++ 代码直接操作其内部封装的 C++ 对象（如 MyNativeCalculator）。参数和返回值都在 jsi::Value 的层面进行，这个层面已经完成了类型匹配，无需字符串中间层。

4. 同步执行：
   由于没有序列化/反序列化和消息队列的开销，JavaScript 调用 HostFunction 或 HostObject 的方法时，可以直接在当前的 JavaScript 线程上执行 C++ 代码。C++ 代码执行完毕后，结果立即通过 jsi::Value 返回给 JavaScript，JavaScript 线程会短暂阻塞，直到 C++ 代码执行完成。这就是同步调用的实现方式。

对比表格：JSI 与传统 Bridge 数据传输差异

特性	传统 Bridge 架构	JSI 架构
数据载体	JSON 字符串	jsi::Value (直接表示 JavaScript 值)
传输机制	序列化为 JSON 字符串，通过消息队列异步传递	直接在 JavaScript 运行时内存中操作或进行轻量级类型转换，同步调用
序列化开销	有，每次数据传输都需要 JSON 编码/解码	无，避免了 JSON 编码/解码的 CPU 和内存开销
数据表示	JS 对象 -> JSON 字符串 -> Native 对象（复制）	JS 对象 <-> C++ 对象（直接引用或类型转换）
性能影响	显著的性能瓶颈，尤其在数据量大或调用频繁时	极低的性能开销，接近原生调用速度
复杂类型	复杂对象和数组需要递归序列化	jsi::Object 和 jsi::Array 直接映射 JS 复杂类型，内部通过引用
内存管理	数据复制导致双份甚至多份内存，GC 压力大	减少数据复制，内存效率更高，GC 压力小

JSI 的设计理念是尽可能地消除 JavaScript 和 C++ 之间的“语言墙”，让它们像在同一个进程中、用同一种数据结构进行通信。这种直接、无序列化的交互方式，是 JSI 带来性能飞跃的根本原因。

五、内存管理与所有权

在 JSI 中，内存管理是一个需要特别注意的方面，尤其是在 C++ 对象和 JavaScript 运行时之间传递数据时。

1. jsi::Value 的生命周期：
   jsi::Value、jsi::Object、jsi::String 等 JSI 类型都是 JavaScript 运行时中值的“句柄”。它们内部通常包含一个指向 JavaScript 堆上实际值的指针。这些句柄是轻量级的，并且通常是自动管理的（例如，当它们超出作用域时）。
   但是，当你需要在一个更长的生命周期内持有 JavaScript 值时（例如，将一个 JavaScript 回调函数存储在 C++ 对象中，以便稍后调用），你需要使用 jsi::Value::asObject(runtime).getFunction(runtime).getPropertyAsFunction(runtime, "myCallback") 这样的方式来获取 jsi::Function，并通过 std::shared_ptr<jsi::Function> 或 jsi::WeakObject 等机制来管理其生命周期，防止 JavaScript 垃圾回收器过早地回收这些值。

2. jsi::HostObject 的所有权：
   HostObject 内部通常会持有指向其封装的 C++ 对象的指针或智能指针（如 std::unique_ptr 或 std::shared_ptr）。

   • std::unique_ptr<MyNativeCalculator>： 当 MyNativeCalculatorHostObject 使用 std::unique_ptr 管理 MyNativeCalculator 时，意味着 HostObject 拥有该 C++ 对象的唯一所有权。当 HostObject 被销毁时（例如，当 JavaScript 侧的 HostObject 实例被垃圾回收，并且没有其他 C++ 代码持有其 std::shared_ptr 引用时），它会自动删除其持有的 MyNativeCalculator。
   • std::shared_ptr<MyNativeCalculatorHostObject>： 当你使用 Object::createFromHostObject(runtime, hostObjectSharedPtr) 将一个 HostObject 暴露给 JavaScript 时，你传递的是一个 std::shared_ptr。JavaScript 运行时会持有这个 shared_ptr 的一个引用。这意味着只要 JavaScript 侧的 HostObject 实例仍然存在，或者 C++ 侧仍然有其他 shared_ptr 引用，底层的 C++ MyNativeCalculatorHostObject 及其封装的 MyNativeCalculator 就不会被销毁。这是管理 HostObject 生命周期最常见和最安全的方式。

正确的内存管理可以避免内存泄漏和悬空指针。通常，std::shared_ptr 是在 JSI 模块中管理 C++ 对象生命周期的首选方式，因为它能很好地处理 JavaScript 和 C++ 之间的共享所有权语义。

六、异步操作与 JSI

尽管 JSI 的核心优势在于同步调用，但在实际应用中，许多原生操作（如网络请求、文件 I/O、复杂的计算）本身就是异步的。JSI 同样提供了优雅的方式来处理异步性。

1. 回调函数：
   最直接的方式是让 JavaScript 传递一个回调函数给 C++。C++ 接收到这个 jsi::Function 后，可以将其存储起来。当异步操作完成时，C++ 可以在适当的时候（通常是在 JavaScript 线程上）调用这个存储的 jsi::Function，并将结果作为参数传递回去。

   // C++ 侧
   #include <jsi/jsi.h>
   #include <thread> // for std::async or custom thread pool
   #include <future> // for std::promise/std::future
   
   using namespace facebook;
   using namespace jsi;
   
   // 假设这是一个执行耗时操作的 C++ 函数
   double performHeavyComputation(double input) {
       std::this_thread::sleep_for(std::chrono::seconds(2)); // 模拟耗时
       return input * input;
   }
   
   void installAsyncHostFunction(Runtime& runtime) {
       runtime.global().setProperty(runtime, "computeAsync", Function::createFromHostFunction(runtime,
           PropNameID::forAscii(runtime, "computeAsync"),
           2, // 假设参数是 input 和 callback
           [](Runtime& rt, const Value& thisVal, const Value* args, size_t count) -> Value {
               if (count < 2 || !args[0].isNumber() || !args[1].isObject() || !args[1].getObject(rt).isFunction()) {
                   throw JSError(rt, "computeAsync requires a number and a callback function.");
               }
   
               double input = args[0].getNumber();
               // 捕获回调函数，并确保其生命周期被管理
               auto callback = std::make_shared<Function>(args[1].getObject(rt).getFunction(rt));
   
               // 在后台线程执行耗时操作
               std::thread([&rt, input, callback]() {
                   double result = performHeavyComputation(input);
   
                   // 确保在 JS 线程上调用回调
                   // 在 React Native 中，这通常通过 Dispatcher 或 UIManager 的 InvokeJS 方法实现
                   // 这里简化为直接在当前线程调用 (实际中需通过 JS 线程调度)
                   // 例如：rt.getJSRuntime()->runOnJSThread([&rt, callback, result](){ ... });
                   // 为了演示，我们假设可以在此线程安全地访问 rt
                   // 实际生产环境需要更复杂的线程调度机制
                   rt.global().getPropertyAsFunction(rt, "setTimeout").call(rt,
                       Function::createFromHostFunction(rt,
                           PropNameID::forAscii(rt, "asyncCallbackWrapper"),
                           0,
                           [&rt, callback, result](Runtime&, const Value&, const Value*, size_t) -> Value {
                               callback->call(rt, Value(rt, result));
                               return Value::createUndefined(rt);
                           }
                       ),
                       Value(rt, 0) // setTimeout with 0 delay to get onto JS thread (hacky, but demonstrates intent)
                   );
               }).detach(); // 启动线程并分离
   
               return Value::createUndefined(rt); // 立即返回，表示操作已启动
           }
       ));
   }

   // JS 侧
   global.computeAsync(10, (result) => {
       console.log('Async computation result:', result); // 2秒后输出 100
   });

2. Promise：
   更现代且推荐的方式是让 C++ 函数返回一个 JavaScript Promise。这样 JavaScript 侧可以使用 await 或 .then() 来处理异步结果。

   实现 Promise 需要在 C++ 中创建一个 jsi::Promise 对象，并通过 resolve 或 reject 其内部的 jsi::Function 来改变 Promise 的状态。

   // C++ 侧 (简化版，实际需要更健壮的错误处理和线程调度)
   #include <jsi/jsi.h>
   #include <thread>
   #include <future>
   #include <memory>
   
   using namespace facebook;
   using namespace jsi;
   
   // 模拟一个异步操作，返回一个 future
   std::future<double> asyncOperation(double input) {
       return std::async(std::launch::async, [input]() {
           std::this_thread::sleep_for(std::chrono::seconds(1));
           if (input < 0) {
               throw std::runtime_error("Input cannot be negative");
           }
           return input * 2;
       });
   }
   
   void installPromiseHostFunction(Runtime& runtime) {
       runtime.global().setProperty(runtime, "promiseBasedCompute", Function::createFromHostFunction(runtime,
           PropNameID::forAscii(runtime, "promiseBasedCompute"),
           1, // 参数是 input
           [](Runtime& rt, const Value& thisVal, const Value* args, size_t count) -> Value {
               if (count < 1 || !args[0].isNumber()) {
                   throw JSError(rt, "promiseBasedCompute requires a number argument.");
               }
               double input = args[0].getNumber();
   
               // 创建一个新的 Promise
               auto promise = rt.global().getPropertyAsFunction(rt, "Promise");
               auto resolver = std::make_shared<Function>(promise.callAsConstructor(rt).getObject(rt).getPropertyAsFunction(rt, "resolve"));
               auto rejecter = std::make_shared<Function>(promise.callAsConstructor(rt).getObject(rt).getPropertyAsFunction(rt, "reject"));
   
               // 在后台线程执行异步操作
               std::thread([&rt, input, resolver, rejecter]() {
                   try {
                       std::future<double> futureResult = asyncOperation(input);
                       double result = futureResult.get(); // 阻塞直到异步操作完成
   
                       // 调度回 JS 线程来 resolve Promise
                       // 在实际 RN 中，这里需要通过 JSRuntime 提供的调度器来执行
                       // 例如：rt.getJSRuntime()->runOnJSThread([&rt, resolver, result](){ ... });
                       // 简化示例：假设可以直接调用
                       rt.global().getPropertyAsFunction(rt, "setTimeout").call(rt,
                           Function::createFromHostFunction(rt,
                               PropNameID::forAscii(rt, "promiseResolveWrapper"),
                               0,
                               [&rt, resolver, result](Runtime&, const Value&, const Value*, size_t) -> Value {
                                   resolver->call(rt, Value(rt, result));
                                   return Value::createUndefined(rt);
                               }
                           ),
                           Value(rt, 0)
                       );
                   } catch (const std::exception& e) {
                       // 调度回 JS 线程来 reject Promise
                       rt.global().getPropertyAsFunction(rt, "setTimeout").call(rt,
                           Function::createFromHostFunction(rt,
                               PropNameID::forAscii(rt, "promiseRejectWrapper"),
                               0,
                               [&rt, rejecter, e](Runtime&, const Value&, const Value*, size_t) -> Value {
                                   rejecter->call(rt, String::createFromUtf8(rt, e.what()));
                                   return Value::createUndefined(rt);
                               }
                           ),
                           Value(rt, 0)
                       );
                   }
               }).detach();
   
               return promise; // 立即返回 Promise 对象
           }
       ));
   }

   // JS 侧
   (async () => {
       try {
           const result = await global.promiseBasedCompute(5);
           console.log('Promise result:', result); // 1秒后输出 10
           const errorResult = await global.promiseBasedCompute(-1);
           console.log('This should not be reached:', errorResult);
       } catch (e) {
           console.error('Promise error:', e); // 输出 Promise error: Input cannot be negative
       }
   })();

七、JSI 的优势与应用场景

JSI 不仅仅是性能优化，它还解锁了 React Native 的许多新能力：

1. 高性能计算模块： 对于需要大量数值计算、图像处理、音频处理等 CPU 密集型任务，JSI 允许将这些逻辑用 C++ 实现，并通过 JSI 直接调用，避免了 Bridge 的性能瓶颈，达到接近原生的性能。
2. 直接硬件交互： JSI 使得 JavaScript 能够更直接地与底层硬件（如蓝牙、传感器、USB 设备）进行交互，实现更低延迟的控制。
3. 新的渲染架构 (Fabric)： JSI 是 React Native 新渲染器 Fabric 的基石。Fabric 允许 JavaScript 直接操作 C++ 端的 UI 视图树，实现同步的 UI 更新，极大地提升了 UI 响应速度和用户体验。
4. TurboModules： 作为 JSI 的上层抽象，TurboModules 提供了更简洁、自动化的方式来生成 JSI 模块的 C++ 绑定代码，降低了 JSI 模块的开发门槛。
5. Hermes 引擎： Hermes 是一个为 React Native 优化的 JavaScript 引擎，它原生支持 JSI，并且在设计之初就考虑了 JSI 的性能优势。

八、JSI 模块的开发与调试

开发流程：

1. 定义 JavaScript 接口： 使用 TypeScript 或 Flow 定义模块的接口，包括函数签名、参数类型和返回值类型。这通常在一个 .js 或 .ts 文件中完成，并遵循特定的命名约定，以便 react-native-codegen 工具能够识别。
2. 生成 C++ 骨架： 使用 react-native-codegen 工具根据 JavaScript 接口生成 C++ 头文件和源文件的骨架。这些文件会包含 JSI 需要的 HostObject 或 HostFunction 的基本结构。
3. 实现 C++ 逻辑： 在生成的 C++ 文件中填充实际的业务逻辑，实现 get、set、call 方法，或者直接实现 HostFunction。在这里，你需要处理 jsi::Value 的类型转换、参数校验以及调用底层的 C++ 库。
4. 安装 JSI 模块： 在原生应用启动时，通过一个特定的 C++ 函数（通常是 installJSIModule 类似的方法），将你的 JSI HostObject 或 HostFunction 注册到 jsi::Runtime 的全局对象上。

调试：

• JavaScript 代码调试： 可以使用 React Native Debugger 或 Chrome DevTools 像调试普通 JavaScript 代码一样调试 JSI 模块的 JavaScript 调用部分。
• C++ 代码调试： 对于 JSI 模块的 C++ 部分，你需要使用原生的调试工具：
  • Xcode (iOS/macOS): 使用 Xcode 进行 C++ 调试，设置断点，检查变量。
  • Android Studio (Android): 使用 Android Studio 的 NDK 调试功能，设置断点，检查 C++ 代码执行。
  • Visual Studio (Windows): 对于 Windows 平台，使用 Visual Studio 进行 C++ 调试。

由于 JSI 实现了同步调用，当 JavaScript 调用 JSI 模块时，C++ 代码会在同一个线程上执行，因此可以在原生调试器中直接跟踪调用栈，非常方便。

九、未来的展望

JSI 是 React Native 新架构的基石，它的重要性不言而喻。随着 React Native 社区全面转向 JSI 和 TurboModules，旧的 Bridge 架构将逐渐被淘汰。这意味着未来的 React Native 应用将能够实现更复杂、更高性能的原生集成，模糊 JavaScript 和原生代码之间的界限。

对于开发者而言，掌握 JSI 意味着能够构建更强大、更高效的 React Native 模块，解决以往难以应对的性能挑战。它鼓励开发者深入理解跨语言通信的底层原理，并以更“原生”的思维来设计和实现高性能的移动应用。

JSI 带来的不仅仅是性能的提升，更是一种范式的转变。它将 React Native 从一个纯粹的异步消息传递框架，提升为一个能够进行直接、同步、高性能跨语言交互的平台。这种能力为 React Native 开启了无限可能，使其能够在更多复杂的应用场景中发挥其潜力，进一步缩小与原生应用之间的性能差距。