快捷導(dǎo)航

React數(shù)據(jù)傳遞的六種方式詳解

更新時(shí)間：2025年08月14日 10:19:22 作者：江城開朗的豌豆

在 React 應(yīng)用程序中,數(shù)據(jù)傳遞是非常重要的,它允許我們?cè)诮M件之間共享信息和狀態(tài),從而構(gòu)建出復(fù)雜的用戶界面,本文將深入探討React數(shù)據(jù)傳遞的六種方式,需要的朋友可以參考下

引言
1. 父子組件：props 直傳（最基礎(chǔ)）
2. 子傳父：回調(diào)函數(shù)（Callback）
3. 兄弟組件：狀態(tài)提升（Lifting State Up）
4. 跨層級(jí)組件：Context API
5. 任意組件：事件總線（Event Bus）
6. 全局狀態(tài)管理：Redux / Zustand
寫在最后?

引言

“在 React 開發(fā)中，組件之間的數(shù)據(jù)傳遞就像現(xiàn)實(shí)中的聊天——父子組件可以直接對(duì)話，兄弟組件需要‘中介’，而跨層級(jí)組件可能得靠‘廣播’。今天，我就結(jié)合 6 年實(shí)戰(zhàn)經(jīng)驗(yàn)，帶大家解鎖 React 組件通信的 6 種姿勢(shì)，讓你徹底告別‘數(shù)據(jù)孤島’！”

1. 父子組件：props 直傳（最基礎(chǔ)）

場(chǎng)景：父組件向子組件傳遞數(shù)據(jù)或函數(shù)。

// 父組件
const Parent = () => {
  const [message, setMessage] = useState("Hello from Parent!");

  return <Child greeting={message} />;
};

// 子組件
const Child = ({ greeting }) => {
  return <h1>{greeting}</h1>; // 直接使用父組件傳遞的 props
};

我的吐槽：
“這就像老爸直接給兒子零花錢，簡(jiǎn)單粗暴，但兒子沒法主動(dòng)要錢（子組件不能反向傳數(shù)據(jù)）。”

2. 子傳父：回調(diào)函數(shù)（Callback）

場(chǎng)景：子組件通過父組件傳遞的函數(shù)“逆向”通信。

// 父組件
const Parent = () => {
  const handleChildClick = (data) => {
    console.log("子組件說：", data); // 接收子組件數(shù)據(jù)
  };

  return <Child onClick={handleChildClick} />;
};

// 子組件
const Child = ({ onClick }) => {
  return <button onClick={() => onClick("I'm Child!")}>點(diǎn)我傳數(shù)據(jù)</button>;
};

我的心得：
“這種方式適合簡(jiǎn)單的交互，比如表單提交。但如果層級(jí)太深，props 會(huì)變成‘擊鼓傳花’，代碼容易變亂。”

3. 兄弟組件：狀態(tài)提升（Lifting State Up）

場(chǎng)景：兩個(gè)兄弟組件共享父組件的狀態(tài)。

// 父組件
const Parent = () => {
  const [count, setCount] = useState(0);

  return (
    <>
      <SiblingA count={count} />
      <SiblingB onUpdate={() => setCount(count + 1)} />
    </>
  );
};

// 兄弟組件 A（顯示數(shù)據(jù)）
const SiblingA = ({ count }) => <div>當(dāng)前計(jì)數(shù)：{count}</div>;

// 兄弟組件 B（修改數(shù)據(jù)）
const SiblingB = ({ onUpdate }) => <button onClick={onUpdate}>+1</button>;

我的比喻：
“這就像兩兄弟共用老爸的支付寶賬號(hào)——花錢（SiblingB）和查余額（SiblingA）都得通過老爸（Parent）。”

4. 跨層級(jí)組件：Context API

場(chǎng)景：避免多層 props 透?jìng)?，?shí)現(xiàn)“隔代通信”。

// 創(chuàng)建 Context
const ThemeContext = createContext("light");

// 祖父組件
const Grandparent = () => {
  return (
    <ThemeContext.Provider value="dark">
      <Parent />
    </ThemeContext.Provider>
  );
};

// 孫子組件（跳過 Parent）
const Grandchild = () => {
  const theme = useContext(ThemeContext);
  return <div>當(dāng)前主題：{theme}</div>; // 直接拿到祖父的數(shù)據(jù)
};

我的提醒：
“Context 適合全局主題、用戶信息等低頻更新數(shù)據(jù)。頻繁更新的值用 Context 可能導(dǎo)致性能問題！”

5. 任意組件：事件總線（Event Bus）

場(chǎng)景：完全不相關(guān)的組件間通信，類似“廣播”。

// 事件總線（可以用 mitt 或自定義）
const eventBus = new EventEmitter();

// 組件 A（發(fā)布事件）
const ComponentA = () => {
  const emitEvent = () => eventBus.emit("alert", "我是組件A發(fā)的消息！");
  return <button onClick={emitEvent}>發(fā)布事件</button>;
};

// 組件 B（訂閱事件）
const ComponentB = () => {
  const [message, setMessage] = useState("");

  useEffect(() => {
    eventBus.on("alert", setMessage);
    return () => eventBus.off("alert", setMessage);
  }, []);

  return <div>收到消息：{message}</div>;
};

我的警告：
“事件總線雖然靈活，但容易導(dǎo)致代碼難以維護(hù)。慎用，除非你真的需要‘廣播’！”

6. 全局狀態(tài)管理：Redux / Zustand

場(chǎng)景：復(fù)雜應(yīng)用需要集中管理狀態(tài)。

// 以 Zustand 為例
import { create } from "zustand";

// 創(chuàng)建 store
const useStore = create((set) => ({
  user: null,
  login: (name) => set({ user: name }),
}));

// 組件 A（修改狀態(tài)）
const ComponentA = () => {
  const login = useStore((state) => state.login);
  return <button onClick={() => login("小楊")}>登錄</button>;
};

// 組件 B（讀取狀態(tài)）
const ComponentB = () => {
  const user = useStore((state) => state.user);
  return <div>當(dāng)前用戶：{user || "未登錄"}</div>;
};

我的選擇：
“Redux 適合大型項(xiàng)目，但學(xué)習(xí)成本高。個(gè)人更推薦 Zustand，API 簡(jiǎn)單，夠用！”