react使用上下文（context）实现登录

在react中登录一般都是用的redux实现登录逻辑， 但是对于小项目来说redux库比较大，并不适用因此使用， context做登录是一个更好的选择。

第一步

创建一个context，并赋值给一个变量，导出变为全局变量

export const UserContext = React.createContext()

第二步

创建一个组件，里面有state和方法。state作为context的value值，并导出组件

class UserProvider extends React.Component{
    login=()=>{}
    logout=()=>{}
    state={
        ...this.state,
        ...{
            login:this.login,
            logout:this.logout,
            user:this.state.user
        }
    }
    render(){
        return(
            <UserContext.Provide value={this.state}>
                {this.props.children}
            </UserContext.Provide>
        )
    }

第三步

在App.js里面引入并使用

import UserContext from './context/user'
import Router from './router.js'
function App(props){
        return(
            <UserContext>
                <Router/>
            </UserContext>
        )
}

第四步

封装context的Consumer，避免每个组件都使用Consumer消费组件

    export function withContext(Context) {
    return function(Component) {
            return function(props) {
                return <Context.Consumer>
                    {(data) => <Component {...{ ...props, ...data}} />}
                </Context.Consumer>;
            };
        };
    }

第五步

在需要使用共享信息的组件引入，获取并更改共享状态

    import { withContext } from '../../utils/index'
    import { UserContext } from '../../contexts/user'
    import React,{useState} from 'react'
    const Login=(props)=>{
       const [loginState,setLoginState] = useState(false)
       const {login,user} = props
       const loginHandle = ()=>{
           console.log(user)//用户信息
           login()//调用登录更改转态后登录成功，跳转登录后首页
       }
        return(
             <button onClick={loginHandle}>登录</button>
        )
    }
    export defalut withContext(UserContext)(Login)

最后

整个登录逻辑就完成了，这个只是一个小demo，遇到类似的需求把业务套进去就ok了