React中组件间数据共享的多种方案

flowchart TD
    A[开始: 需要共享数据?] --> B{共享范围?};
    
    B --> C[父子/邻近组件];
    B --> D[多层级/许多组件];
    B --> E[全局/复杂应用状态];
    
    C --> F[使用 Props & Callback];
    
    D --> G{数据更新频率?};
    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)}>发送数据给父组件</button>
    </div>
  );
}

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

  // 接收子组件数据的回调函数
  const handleReceiveData = (dataFromChild) => {
    setChildData(dataFromChild);
  };

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

父组件状态更新 → ParentComponent 重渲染 → 新的 props (message) 传递给 ChildComponent → ChildComponent 重渲染

// 1. 创建一个 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. 创建 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. 创建 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 获取状态
  const dispatch = useDispatch(); // 获取 dispatch 函数

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

import create from 'zustand';

// 1. 创建 Store（一个 Hook！）
const useBearStore = create((set) => ({
  bears: 0,
  increasePopulation: () => set((state) => ({ bears: state.bears + 1 })),
  removeAllBears: () => set({ bears: 0 }),
}));

// 2. 在组件中使用，直接选择需要的状态和动作
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>;
}