reactjs - 这是使用reactjs上下文的正确方法吗

Question

我刚开始写 reactjs 几个星期。最近，我使用上下文来实现网络会话，代码如下：

这是正确的方法吗？如果导入了上下文组件，任何组件都可以更改上下文中的值，并且上下文中的值可以在组件之间传递。

会话上下文.js

import React from 'react';

export const SessionContext = React.createContext({
    authenticated: false,
    username: ''
});   

登录.js

import React, { useRef, useContext } from 'react';
import { useHistory } from 'react-router-dom';

import { SessionContext } from '../common/SessionContext';
import './Login.css';

export default function Login() {

    const sessionContext = useContext(SessionContext);
    const history = useHistory();
 
    const username= useRef('');
    const password= useRef('');

    const login = () => {
        sessionContext.authenticated = true;
        sessionContext.username = username.current.value;
        history.push("/home");
    };

    return (
...avoid too much code complain...
    );

}

主页.js

import React, { useContext, useEffect } from 'react';
import { useHistory } from 'react-router-dom';

import { SessionContext } from './SessionContext';
import TopAppBar from './TopAppBar';
import LeftDrawer from './LeftDrawer';

export default function Home(props) {

    const sessionContext = useContext(SessionContext);
    const history = useHistory();

    useEffect(() => {
        if (!sessionContext.authenticated) {
            history.push("/");
        }
    });

    return (
        <div>
            <LeftDrawer/>
            <TopAppBar />
        </div>
    );

}    

标签： reactjsreact-context