在 react (Node.JS) 中使用繁重/耗时的函数

Posted 2023-03-05

【中文标题】在 react (Node.JS) 中使用繁重/耗时的函数

【英文标题】：Working with heavy/time-consuming functions in react (Node.JS)

【发布时间】：2021-08-30 20:54:06

【问题描述】：

晚上好，我有一个 React 项目，当用户打开页面时，应用程序开始创建 2048 RSA 密钥对。如何确保页面不会“崩溃”，也就是说，它会留在后台，并且在创建密钥时我会通知用户一切就绪。

            const navigate = useNavigate();
            const [keyStatus, setKeyStatus] = useState('Em processamento... (É normal que a pagina parece ter crashado! Por favor espere!)');
            const [pubKey, setPubKey] = useState('');
            const [privKey, setPrivKey] = useState('');
            const [genState, setGenState] = useState(0);
            function exitModal()
                modal.setModal(true);
            
            async function downloadPrivKey() 
                if(genState === 1)
                    await api.post('/savePublicKey', 
                        publicKey: pubKey
                    ).then(function(response)
                        fileDownload(privKey, 'private.key', 'text/plain');
                        setGenState(2);
                    ).catch(function ()
                        navigate('/',  replace: true );
                    );
                
            
useEffect(() => 
    async function startGenerationKeys() 
        const keysWorker = new Worker();
        keysWorker.postMessage("start");
        keysWorker.onmessage = (e) => 
            setPrivKey(e.data.privKey);
            setPubKey(e.data.pubKey);
            setKeyStatus('Pronta para download!');
            setGenState(1);
        ;
    
    startGenerationKeys();
, []);
         return (
                <Container>
                    <PageTitle>Criação das chaves</PageTitle>
                    <InstructionText>Você irá precisar da sua chave privada para poder usar a plataforma!</InstructionText>
                    <AlertText>Em caso de perda da sua chave não será possivel recuperar as suas passwords pessoais!</AlertText>
                    <AlertText>Não se esqueça de transferir a sua chave!</AlertText>
                    <AlertText>Não feche este separador durante a criação das chaves!</AlertText>
                    <InstructionText>Estado das chaves: keyStatus</InstructionText>
                    <BtnsZone>
                        <BtnBox isClicable=genState !== 0 ? true : false onClick=downloadPrivKey>
                            <FaDownload size=15 color="#FFF" />
                            <BtnText>Descarregar chave privada</BtnText>
                        </BtnBox>
                        <BtnBox isClicable=genState === 2 ? true : false>
                            <MdNextWeek size=20 color="#FFF" />
                            <BtnText>Prosseguir para a plataforma</BtnText>
                        </BtnBox>
                    </BtnsZone>
                    <BtnBox isClicable=true isAlone=true onClick=exitModal>
                        <ImExit color="#FFF" size=22 />
                        <BtnText>Terminar sessão</BtnText>
                    </BtnBox>
                </Container>
            );

网络工作者：

        import NodeRSA from 'node-rsa';

    export default onmessage = function() 
        const keysPair = new NodeRSA( b: 4096 );
        const pubKey = keysPair.exportKey('public').replace(/(\r\n|\n|\r)/gm,"");
        const privKey = keysPair.exportKey('private');
        postMessage(
            pubKey,
            privKey
        );
    

【问题讨论】：

这个组件的 jsx 是什么样的？

好的，我将我的 jsx 组件添加到问题中。

你研究过网络工作者吗？

使用 WebWorker，页面似乎崩溃了，包括来自 Google Chrome 的“页面未回答”的警告。

您似乎没有正确使用工人。您需要显示 Worker 的来源——如果这是通常的 Worker() 构造函数，则需要将工作代码 URL 传递给它。

【参考方案1】：

我不是在谈论与页面交互。我是说检查组件内部的状态并基于它做一些事情。举个例子。

在useEffect下返回之前

if(keyStatus !== "Pronta para download!") return <div>Loading..</div>

设置为等待密钥准备好下载？

编辑

我认为一旦你弄清楚了网络工作者的东西，这将起作用。基本上，您只需加载屏幕显示，直到状态更新说密钥已准备好下载。您可以添加一些 ui 微调器以使屏幕显示移动。以便最终用户知道正在发生的事情并且网站没有崩溃。

【讨论】：

感谢您的帮助，但问题在于浏览器在处理密钥对的创建时会阻塞（不允许您与页面交互）。有时用户被重定向到 root /

在这种情况下，IF 内部的内容已加载，但即使使用 webWorker，页面似乎也会崩溃，包括来自 Google Chrome 的“页面未回答”的警告。