[react]グローバルステータスとゾーンステータス(グローバルステータス管理)

Props Drilling

 反応を処理するとき、状態(state)の使い方に多くの悩みが生じる.どの値をstateに設定すべきかから、どこに置くべきかまで.デフォルトでは、親コンポーネントでステータスを作成しpropsに降格し、サブコンポーネントで使用します.どんなに深くてもpropsに下げるだけでサブアセンブリで使用できます.でもそうすると道具のドリルが発生して、全く必要ない状態ですが、下に置く理由で道具でつないでくる過程です.
 もちろん、これは反応器の基本的な機能であり、一般的にはドリルで使用されています.しかし、素子の深さが5個、10個以上であれば?道具地獄に落ちる.マリアまたは海口で最上位コンポーネントの状態を使用すると、穿孔が継続する場合に直面します.
 ずーっと潜っていくと、「今何してるの?」こんな考えがあります.開発者は何かが繰り返されるのが好きではありません.繰り返しは私がやったのではなく、パソコンがやったはずです.

退役状態は何ですか。

 グローバル変数と同様に、グローバルステータスと呼ばれます.ステータスの位置に関係なく、どこでも使用できるステータスはグローバルステータスです.逆に、領域状態は、ある領域でのみ使用される状態(基本状態の概念とみなされる)と見なすことができる.グローバルステータスとは、応答コードグローバルで何らかのステータスを使用するために行われるステータス管理の概念である.

Context API

 反応器には、シャベルで穴を掘らずに他の素子に状態を伝える道具がある.特定の構成部品はステータスを提供し、contextとして保存されます.他の構成部品は、このcontextを使用してグローバルステータスに書き込むことができます.

状態素子

// Provider Component
import { createContext, useMemo, useState } from 'react'

export const LoginContext = createContext({ login: false, setLogin: () => {} })

const ProviderComponent = () => {
  const [login, setLogin] = useState(false);
  const memo = useMemo(() => ({ login, setLogin }), [login, setLogin]);
  // useMemo를 사용하는 이유는 해당 객체가 매번 리렌더링 되지 않게 하기 위함
  return (
    <LoginContext.Provider value={memo}>
      <PassThrough />
      <div>{login ? 'logged in' : 'logged out'}</div>
    </LoginContext.Provider>
  );
);

export default ProviderComponent;

サブエレメント

// PassThrough Component
import ConsumerComponent from './ConsumerComponent';

export default const PassThrough = () => {
  return <ConsumerComponent />;
};
// 거쳐가는 컴포넌트에서 props를 받거나 내려주지 않음

状態素子

// ConsumerComponent
import { useContext } from 'react';
import { LoginContext } from '/ProviderComponent';

export default const ConsumerComponent = () => {
  const { login, setLogin } = useContext(LoginContext);
  
  const handleLogin = () => {
    setLogin((prev) => !prev)
  }
  return (
    <div className="login-button-wrapper">
      <button onClick={handleLogin}>{login ? "로그아웃" : "로그인"}</button>
    <div>
  );
};

ProviderとConsumerコンポーネントの間にはインタラクションはありませんが、正常に受信して使用できます!
Reduxのようなライブラリでも良いのですが、グローバル状態を制御するためだけなら複雑にライブラリに切り替える必要はなく、context hookを使うだけです.
注意

:受信状態の構成部品が子構成部品でない場合、プロバイダが提供する状態値は取得できません.