React: コンテキストとグローバル状態

Context ベースの状態をコンポーネント間で共有

App コンポーネントの状態は 'light'。インタラクティブな UI をレンダリング。

function App() {
  return (
    <AuthProvider>
      <ThemeProvider>
        <I18nProvider>
          <NotificationProvider>
            <MainApp />
          </NotificationProvider>
        </I18nProvider>
      </ThemeProvider>
    </AuthProvider>
  )
}

function AppProviders({ children }) {
  return (
    <AuthProvider>
      <ThemeProvider>
        <I18nProvider>
          <NotificationProvider>
            {children}
          </NotificationProvider>
        </I18nProvider>
      </ThemeProvider>
    </AuthProvider>
  )
}

function App() {
  return (
    <AppProviders>
      <MainApp />
    </AppProviders>
  )
}

// ❌ Question：Every time App Rendering，value They're all new partners. → All Consumer All are heavily rendered
function App() {
  const [count, setCount] = useState(0)
  return (
    <ThemeContext.Provider value={{ theme: 'dark', setCount }}>
      <ExpensiveTree />
    </ThemeContext.Provider>
  )
}

// ✅ Fix 1：use  useMemo Stable value Quote
function App() {
  const [count, setCount] = useState(0)
  const themeValue = useMemo(
    () => ({ theme: 'dark', toggleTheme: () => setCount(c => c + 1) }),
    []
  )
  return (
    <ThemeContext.Provider value={themeValue}>
      <ExpensiveTree />
    </ThemeContext.Provider>
  )
}

// ✅ Fix 2：separate "unchanged" and "changed" data into different Context
const SettingsContext = createContext({ theme: 'light', language: 'zh' })
const CountContext = createContext(0)

function App() {
  const [count, setCount] = useState(0)
  return (
    <SettingsContext.Provider value={settingsValue}> {/* useMemo Stable */}
      <CountContext.Provider value={count}>
        <ExpensiveTree />
      </CountContext.Provider>
    </SettingsContext.Provider>
  )
}
// Only when used CountContext The component will be count Re-render on changes
// SettingsContext Consumers will not be affected

表示："Button"。状態：theme（setter：setTheme）。ボタン：Button

メールアドレス/パスワードのログインフォーム。メールアドレスの形式が不正な場合 → 赤い枠線 + "The email address format is incorrect."。パスワードが 6 文字未満 → "Password must be at least 6 chars"。送信 → console.log({email, password})

サブタイトル："🔐 Log In"。表示："🔐 Log In"。状態：user（setter：setUser）、loading（setter：setLoading）、username（setter：setUsername）。ボタン：{loading ? 'Logging in......' : 'Log In'}、Log Out。入力：Username（Input admin Experience the Role of an Administrator）、Password。送信処理付きのフォーム。useMemo で計算を最適化。useCallback でハンドラ関数の参照をキャッシュ。Context によるグローバル状態。非同期データ取得/読み込み状態。タイマーベースの挙動

国際化：言語スイッチャーがすべてのテキストを変更する。Context + provider パターンで多言語に対応

サブタイトル："{t('greeting')}"。表示："Chinese"。状態：locale（setter：setLocale）。ドロップダウン：Chinese、English。useMemo で計算を最適化。useCallback でハンドラ関数の参照をキャッシュ。Context によるグローバル状態

SplitContextApp コンポーネントの状態は：null、false。インタラクティブな UI をレンダリング。

表示："Login"。状態：user（setter：setUser）、loading（setter：setLoading）。ボタン：login('Alice')}>Login。useMemo で計算を最適化。Context によるグローバル状態。非同期データ取得/読み込み状態。タイマーベースの挙動

SettingsApp コンポーネントの状態は：{
    theme: 'light', fontSize: 14, sidebarCollapsed: false,
  }。インタラクティブな UI をレンダリング。