时间戳

首页 > 解决方案 > 当我们只能使用自定义钩子时，为什么还要使用 Provider 和 useContext 呢？

reactjs - 当我们只能使用自定义钩子时，为什么还要使用 Provider 和 useContext 呢？

问题描述

当我们只能使用自定义钩子时，为什么还要使用 Provider 和 useContext 呢？

即我有一个自定义钩子，提供用户数据和登录/注销 fn：

export default function useAuth() {
    const [userInfo, setUserInfo] = useState(null)
    const [isLoggedIn, setLoggedIn] = useState(false)
  
    const logout = () => {}
    const login = () => {}
  
    useEffect(() => {
     // do auth stuff
     // setUserInfo({...})
     // setLoggedIn(true)
    }, [])

  return { userInfo, logout, login, isLoggedIn }
}

我想我可以创建 AuthProvider，然后通过组件中的 useContext 访问这些值。

仅使用 useAuth() 而不是在 AuthProvider 中使用 useContext 有什么区别？

我想最好使用第二种方法，因为 useAuth() 将在我调用它的每个组件上使用 useEffect 运行，我只能在 AuthProvider 中运行一次 useEffect 并与 useContext 共享检索到的状态。

标签： reactjs

解决方案

自定义钩子解决了样板代码的问题。如果您的不是库，并且您不打算再次重用自定义挂钩，为什么要浪费将其捆绑为单独的文件或自定义挂钩？

如果您相信您的useAuth(), 只使用一次，这似乎很理想，因为身份验证只进行一次，我认为不需要自定义挂钩。过度工程并不好，记住 YAGNI pronciple。

推荐阅读