Javascript 本机响应，在后台执行昂贵的任务？

与react native混为一谈生成一些pub/priv RSA密钥：

正如您在下面看到的，我有一个微调器，它根据状态变量有条件地触发。问题是，主UI线程在执行之前就被冻结了，即使状态已经翻转。我几乎试图让工人在RN环境中工作，但这是一个巨大的痛苦

我的选择是什么？我希望加载程序在单击按钮后和计算期间运行，但在计算完成时停止

我还想删除

activateLoader（）

函数

我的黑客 用于密钥生成的类示例

类控件扩展组件{
建造师（道具）{
超级（）；
此.state={
可见：假
};
}
activateLoader（）{
this.setState（{visible:！this.state.visible}，（）=>{
console.log（this.state.visible）；
这是generateKeys（）；
});
}
generateKeys（）{
RSA.generateKeys（4096）
。然后（键=>{
Toast.show（`公钥和私钥已\
保存到设备并加密`，Toast.LONG）；
这是我的国家({
可见：！this.state.visible
});
});
}
render（）{
返回(
this.activateLoader（）}
/>
);
}
}

来自的潜在解决方案

每次调用wait nextFrame（）时，函数的执行都将暂停，直到下一个渲染周期开始。这允许应用程序在返回处理列表中的下一项之前响应用户输入并渲染动画

activateLoader() {
    this.setState({ visible: !this.state.visible }, () => {
        console.log(this.state.visible);
        setInterval(() => {
            this.generateKeys();
        }, 1000);
    });
}

class Controls extends Component {

    constructor(props) {
        super();
        this.state = {
            visible: false
        };
    }

    activateLoader() {
        this.setState({ visible: !this.state.visible }, () => {
            console.log(this.state.visible);
            this.generateKeys();
        });
    }

    generateKeys() {
        RSA.generateKeys(4096)
            .then(keys => {
                Toast.show(`Public & Private Keys Have Been\
                 Saved To Device and Encrypted`, Toast.LONG);

                this.setState({
                    visible: !this.state.visible
                });
            });
    }

    render() {
        return (
            <View style={styles.parentViewStyle}>
                <Spinner visible={this.state.visible} textContent={"Generating Key Pairs"} textStyle={{ color: '#000' }} />
                <ControlButton
                    btnLabel="Join Encrypted Room"
                />
                <ControlButton
                    btnLabel="Generate Public/Private Key Pair"
                    onClick={() => this.activateLoader()}
                />
            </View >
        );
    }
}

import nextFrame from 'next-frame';

  async activateLoader() {
    this.setState({ visible: !this.state.visible });
    await nextFrame();
    this.generateKeys();
}