如何将 Firebase Auth Class 组件生命周期转换为 ReactJS 中的 Hooks useEffect？

Question

我正在尝试将以下 class 组件的 firebase 身份验证生命周期转换为挂钩的 useEffect 方法。

class App extends React.Component {
state = {
    user: null
};

unsubscribeFromAuth = null;

componentDidMount(){
    this.unsubscribeFromAuth = firebase.auth().onAuthStateChanged((user) => {
        this.setState({user: user});
    });
}
componentWillUnmount(){
    this.unsubscribeFromAuth();
}

}

我尝试使用以下代码对其进行转换，它似乎可以工作，但我不确定它是否是正确的实现。有一条警告说 'user' 被分配了一个值但从未使用过。我应该将第 2 行更改为：$const [ , setUser] = useState(null);

const App = () => {
const [user, setUser] = useState(null);
const unsubscribeFromAuth = useRef(null); 
useEffect(() => {
    unsubscribeFromAuth.current = auth.onAuthStateChanged((user) => {
        setUser(user);
        console.log(user);
    })
    return () => {
        unsubscribeFromAuth();
    }
}, []);

}

Answer 1

创建一个 custom hook 到 return 经过身份验证的用户。

此挂钩可以在任何需要经过身份验证的 user 信息的功能组件中重复使用。

function useAuthUser(props) {
  const [user, setUser] = useState(null);

  useEffect(() => {
    // no need for ref here
    const unsubscribeFromAuth = auth.onAuthStateChanged((user) => {
      setUser(user);
    })

    return () => {
      unsubscribeFromAuth();
    }
  }, []);

  return user; // return authenticated user
}

function App() {
  const user = useAuthUser(someProps);

  return <div>{user}</div>
}

如何将 Firebase Auth Class 组件生命周期转换为 ReactJS 中的 Hooks useEffect？

How to convert Firebase Auth Class Component Lifecycle to Hooks useEffect in ReactJS?

lifecycle

firebase

reactjs

use-effect