flowchart TD
    A[開始: 需要共享數(shù)據(jù)?] --> B{共享范圍?};
    
    B --> C[父子/鄰近組件];
    B --> D[多層級/許多組件];
    B --> E[全局/復雜應用狀態(tài)];
    
    C --> F[使用 Props & Callback];
    
    D --> G{數(shù)據(jù)更新頻率?};
    G -- 低頻(主題/用戶信息) --> H[使用 Context API];
    G -- 高頻 --> E;
    
    E --> I{需要中間件和嚴格流程?};
    I -- 是 --> J[使用 Redux + Toolkit];
    I -- 否,追求簡單 --> K[使用 Zustand];

// 子組件
function ChildComponent({ message, onSendDataToParent }) {
  const data = "Hello from Child!";
  return (
    <div>
      <p>收到父組件消息: {message}</p>
      <button onClick={() => onSendDataToParent(data)}>發(fā)送數(shù)據(jù)給父組件</button>
    </div>
  );
}

// 父組件
function ParentComponent() {
  const [parentData, setParentData] = useState("Hello from Parent");
  const [childData, setChildData] = useState("");

  // 接收子組件數(shù)據(jù)的回調函數(shù)
  const handleReceiveData = (dataFromChild) => {
    setChildData(dataFromChild);
  };

  return (
    <div>
      <ChildComponent 
        message={parentData} 
        onSendDataToParent={handleReceiveData} 
      />
      <p>收到子組件消息: {childData}</p>
    </div>
  );
}

父組件狀態(tài)更新 → ParentComponent 重渲染 → 新的 props (message) 傳遞給 ChildComponent → ChildComponent 重渲染

// 1. 創(chuàng)建一個 Context
const ThemeContext = React.createContext('light'); // 'light' 為默認值

// 2. 提供者組件 (Provider)
function App() {
  const [theme, setTheme] = useState('dark');
  return (
    // 使用 Provider 包裹，并傳遞 value（這里傳遞了 theme 和 setTheme）
    <ThemeContext.Provider value={{ theme, setTheme }}>
      <Toolbar />
    </ThemeContext.Provider>
  );
}

// 中間的組件不需要再傳遞 theme prop
function Toolbar() {
  return (
    <div>
      <ThemedButton />
    </div>
  );
}

// 3. 消費者組件 (使用 useContext Hook)
function ThemedButton() {
  //  useContext 接收 Context 對象，返回當前的 value
  const { theme, setTheme } = useContext(ThemeContext);
  return (
    <button 
      style={{ background: theme === 'dark' ? '#333' : '#CCC' }}
      onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}
    >
      當前主題: {theme}
    </button>
  );
}

function useTheme() {
  const context = useContext(ThemeContext);
  if (!context) {
    throw new Error('useTheme must be used within a ThemeProvider');
  }
  return context;
}
// 在組件中直接使用
const { theme } = useTheme();

React Component --(dispatches)--> Action --(flows into)--> Reducer --(updates)--> Store --(notifies)--> React Component

// 1. 創(chuàng)建 Slice (包含 reducer 和 actions)
import { createSlice, configureStore } from '@reduxjs/toolkit';

const counterSlice = createSlice({
  name: 'counter',
  initialState: { value: 0 },
  reducers: {
    incremented: state => { state.value += 1; },
    decremented: state => { state.value -= 1; },
  },
});

export const { incremented, decremented } = counterSlice.actions;

// 2. 創(chuàng)建 Store
const store = configureStore({
  reducer: counterSlice.reducer
});

// 3. 在 React 組件中使用 (需要 react-redux 庫)
import { Provider, useSelector, useDispatch } from 'react-redux';

// 在應用最外層提供 Store
function ReduxApp() {
  return (
    <Provider store={store}>
      <Counter />
    </Provider>
  );
}

// 在子組件中連接 Redux
function Counter() {
  const count = useSelector(state => state.value); // 從 Store 獲取狀態(tài)
  const dispatch = useDispatch(); // 獲取 dispatch 函數(shù)

  return (
    <div>
      <span>{count}</span>
      <button onClick={() => dispatch(incremented())}>+</button>
      <button onClick={() => dispatch(decremented())}>-</button>
    </div>
  );
}

import create from 'zustand';

// 1. 創(chuàng)建 Store（一個 Hook?。?
const useBearStore = create((set) => ({
  bears: 0,
  increasePopulation: () => set((state) => ({ bears: state.bears + 1 })),
  removeAllBears: () => set({ bears: 0 }),
}));

// 2. 在組件中使用，直接選擇需要的狀態(tài)和動作
function BearCounter() {
  const bears = useBearStore((state) => state.bears);
  return <h1>{bears} around here...</h1>;
}

function Controls() {
  const increasePopulation = useBearStore((state) => state.increasePopulation);
  return <button onClick={increasePopulation}>Add bear</button>;
}