Javascript 如何使用useRef或其他方法使auth变量在整个程序中都可用，而不会在重新渲染后更改

我可以使用this.auth将它与类组件一起使用，但是如何使用基于函数的组件和挂钩来实现呢

import React, { useEffect, useState } from 'react';

const GoogleAuth = () => {
    const [ isSignedIn, setIsSignedIn ] = useState(null);

    useEffect(() => {
        window.gapi.load('client:auth2', () => {
            window.gapi.client
                .init({
                    clientId: '#ID',
                    scope: 'email'
                })
                .then(() => {
                    //THIS AUTH VARIABLE
                    const auth = window.gapi.auth2.getAuthInstance();
                    setIsSignedIn(window.gapi.auth2.getAuthInstance().isSignedIn.get());
                    auth.isSignedIn.listen(onAuthChange);
                });
        });
    }, []);

    const onAuthChange = () => {
        setIsSignedIn(window.gapi.auth2.getAuthInstance().isSignedIn.get());
    };

---

this.auth的钩子等价物是

useRef

：

import React, { useEffect, useState, useRef } from 'react';

const GoogleAuth = () => {
    const auth = useRef()
    const [ isSignedIn, setIsSignedIn ] = useState(null);

    useEffect(() => {
        window.gapi.load('client:auth2', () => {
            window.gapi.client
                .init({
                    clientId: '#ID',
                    scope: 'email'
                })
                .then(() => {
                    auth.current = window.gapi.auth2.getAuthInstance();
                    setIsSignedIn(window.gapi.auth2.getAuthInstance().isSignedIn.get());
                    auth.current.isSignedIn.listen(onAuthChange);
                });
        });
    }, []);

    const onAuthChange = () => {
        setIsSignedIn(window.gapi.auth2.getAuthInstance().isSignedIn.get());
    };

---

但是，由于这是身份验证数据，您可能也有兴趣查看

useContext

，或者可能有一个自定义钩子将其存储在sessionStorage或localStorage中。

您可以通过使用React-Context API来实现这一点