[react/context]実際の操作に使用できるかどうか

5437 ワード
React テキストリンク
1.序曲
ReactはRedux、MobX、Contextを使用してグローバルから
propsを共有できます
では、既存の業界で使用できるかどうかを試してみましょう.
今日の例では、次のタスクを実行します.
  • Contextでデータを共有したい
  • 部屋
    • もご利用ください
    登録/非登録画面を共有するかどうかは、
  • の認証を押してください.
    2. Context
    リカバリ・サーバが正常に稼働していることを前提に
    サブコンポーネントでデータを操作するためのContextを作成します.
    ファイルを作成して理解します.😙
    ルートパスにsrcフォルダを作成します.
    AuthContextをもう一つ作ろうjsファイルを作成します.
    「createContext」をインポートしてcontextを作成
    // src/context/AuthContext.js
import React, { useState, createContext } from "react";

export const AuthContext = createContext();

export const AuthProvider = ({children}) => {
    const [userState, setUserState] = useState({
        _id: '',
        name: '',
        auth: false
    });

    const isAuthenticated = async (token) => {
        return await fetch(apiURL, {
            method: "GET",
            headers: {
                "Accept": "application/json",
                "Authorization": `Token ${token}`
            }
        })
        .then(response => response.json())
        .catch(err => console.log(err))
    };

    return (
        <AuthContext.Provider value={ {userState, setUserState, isAuthenticated} }>
            {children}
        </AuthContext.Provider>
    );
};
    「useState」Hookを使用して、ユーザーの認証の有無に応じて「auth」の値を変更します.
    プロバイダがコンテキストを変更
    広報役を務め、「AuthContext」でvalueを使う
    userState HooksのuserState、setUserState、および
    サブコンポーネントにisAuthenticated関数を渡す
    3. App
    ルートパスにsrcフォルダを作成します.
    app.jsファイルを作成し、次のコードを記述します.
    // src/app.js
import React, {useContext, useEffect} from "react";
import ReactDOM from "react-dom";
import {AuthContext, AuthProvider} from "./context/AuthContext";

const App = () => {
    const {userState, setUserState} = useContext(AuthContext);
    
    return userState.auth ? <div>true</div> : <div>false</div>;
};

ReactDOM.render(
    <AuthProvider>
        <App />
    </AuthProvider>,
    document.getElementById("app"));
    コンテキストで設定されたpropsを取得するには、最上位レベルで「AutheProvider」をレンダリングします.
    「useContext」Hookを使用して作成された
    現在の値の返却が可能
    次にfetchを使用して認証を行い、userStateのauth値を
    変更
    // src/app.js
const App = () => {
    const {userState, setUserState, isAuthenticated} = useContext(AuthContext);
    const token = 로그인 후 저장된 토큰

    const authenticationUser = () => {
        isAuthenticated(token)
        .then(data => {
            if(data.error) {
                console.error('Error:', data.error)
            } else {
                setUserState({
                    _id: data.user._id,
                    name: data.user.name,
                    auth: data.user.auth
                });
            }
        });
    };

    useEffect(() => {
        authenticationUser();
    }, []);
    
    return userState.auth ? <div>true</div> : <div>false</div>;
};
    一目でわかる👏
    ログイン後、Cookieまたはセッションに格納されるタグ
    検証して結果を「setUserState」に変更します.これは検証するかどうかによって異なります.
    別の画面が見えます
    4.整理
    ✔ContextもReduxまたはMobXの意図で作成
    ✔部品の再利用が難しいという欠点がある
    ✔特定以外の値を変更した場合、すべて再レンダリングされます(致命的)
    ✔storeが多くなく、状態管理が困難
    ✔部品外使用不可
    10004 MソフトウェアでSide-effect管理ができません
    ✔のいろいろな欠点から、今の業界では使いにくいと思っています.
    • mysql連合インデックスの失効問題を記録する
    kotlinコラボレーションベースの共有