useContext() ：用React context管理登录状态

声明：不是我自己原创的code，是Udemy课程里的代码，我结合实际运用情况改写了一下。原课程：https://www.udemy.com/course/react-the-complete-guide-incl-redux/

本文代码块只写了context相关的部分，完整代码（请切到react-login-demo分支查看）：https://github.com/CrystalCAI11/udemy-react-course/tree/react-login-demo

使用前提：context api建议仅用于没有使用redux的小型项目， context api并不能完全替代redux，以及useContext()只能用在function component中。

第一步：create你的context

// context file
const AuthContext = React.createContext({
  token: "",
  isLoggedIn: false,
  onLogin: (token, expTime) => {},
  onLogout: () => {},
})

React.createContext()里的内容只是为了在组件引用context的时候有下图这样的输入自动联想，不是实际的函数。不需要的话也可以空着。

接着创建一个context provider 把实际的登录登出的方法都写在里面，return AuthContext.Provider

export const AuthContextProvider = (props) => {
  const loginHandler = () => {
  	 // 这里写真正的登录方法
  }

   const loginHandler = () => {
  	 // 这里写真正的登出方法
  }
  
  const contextValue = {
    token: token,
    isLoggedIn: isLoggedIn,
    onLogin: loginHandler,
    onLogout: logoutHandler,
  }

  return (
    <AuthContext.Provider value={contextValue}>
      {props.children}
    </AuthContext.Provider>
  )
}

export default AuthContext

第二步：index.js里引入你创建的context provider把App包起来，这里和redux provider其实是一样的

// index.js
import { AuthContextProvider } from "./store/auth-context"

ReactDOM.render(
  <AuthContextProvider>
    <App />
  </AuthContextProvider>,
  document.getElementById("root")
)

第三步：在组件中使用引入useContext这个react自带的hook和你创建的context。useContext()解构你的context，解构出来的 authCtx.就可以调用所有context里的方法和变量，非常方便。比如在登录按钮上绑定authCtx.onLogin()
所有需要使用context的组件都得引用一次，这个也和redux一样。

// your component.jsx
import  { useContext } from "react"
import AuthContext from "../../store/auth-context"

const Login = (props) => {
	 const authCtx = useContext(AuthContext)
	 const submitHandler = (event) => {
	  authCtx.onLogin()
	}
	return(<button onClick={submitHandler}>登录</button>)
}

第四步：因为登录状态一般是全局通用的，所以App.js里也要引用。根据context里的isLoggedIn来render不同的组件

// App.js
import React, { useContext } from "react"
import Login from "./components/Login/Login"
import Home from "./components/Home/Home"
import MainHeader from "./components/MainHeader/MainHeader"
import AuthContext from "./store/auth-context"

function App() {
  const authCtx = useContext(AuthContext)
  return (
    <React.Fragment>
      <MainHeader />
      <main>
        {!authCtx.isLoggedIn && <Login />}
        {authCtx.isLoggedIn && <Home />}
      </main>
    </React.Fragment>
  )
}

export default App

以上，欢迎补充。