【JS】React组件通信全攻略：详解父子、兄弟组件的通信方式父子组件之间的通信是最基本也是最常见的通信方式。React

Moss前沿AI

父子组件通信

父子组件之间的通信是最基本也是最常见的通信方式。React通过props和回调函数实现数据的双向传递。

1.1 父->子：通过Props传递数据

父组件可以通过props将数据传递给子组件。这种传递是单向的，即父组件的数据流向子组件，子组件无法直接修改父组件的数据。

示例代码：

// 父组件
import React from 'react';
import Child from './Child';

const Parent = () => {
  const parentData = "Hello from Parent";

  return (
    <div>
      <h1>Parent Component</h1>
      <Child data={parentData} />
    </div>
  );
};

export default Parent;

// 子组件
import React from 'react';

const Child = ({ data }) => {
  return (
    <div>
      <h2>Child Component</h2>
      <p>{data}</p>
    </div>
  );
};

export default Child;

解析：

在上述代码中，父组件Parent通过props将parentData传递给子组件Child。子组件通过解构赋值{ data }获取到传递的数据，并在渲染时显示。

1.2 子->父：通过回调函数传递数据

由于数据流是单向的，子组件无法直接修改父组件的数据。为了解决这一问题，可以在父组件中定义一个回调函数，并将其通过props传递给子组件。子组件可以调用这个回调函数，将数据传递回父组件，达到子->父通信的效果。

示例代码：

// 父组件
import React, { useState } from 'react';
import Child from './Child';

const Parent = () => {
  const [message, setMessage] = useState("");

  const handleChildData = (childData) => {
    setMessage(childData);
  };

  return (
    <div>
      <h1>Parent Component</h1>
      <Child sendDataToParent={handleChildData} />
      <p>Message from Child: {message}</p>
    </div>
  );
};

export default Parent;

// 子组件
import React, { useState } from 'react';

const Child = ({ sendDataToParent }) => {
  const [childMessage, setChildMessage] = useState("");

  const handleChange = (e) => {
    setChildMessage(e.target.value);
    sendDataToParent(e.target.value);
  };

  return (
    <div>
      <h2>Child Component</h2>
      <input type="text" value={childMessage} onChange={handleChange} placeholder="Type message to parent" />
    </div>
  );
};

export default Child;

解析：

在这个例子中，父组件Parent定义了一个状态message，并传递了一个回调函数handleChildData给子组件Child。子组件在输入框的onChange事件中调用这个回调函数，将输入的数据传回父组件，父组件更新message并显示出来。

兄弟组件通信

兄弟组件之间的通信相对复杂，因为它们没有直接的父子关系。通常有以下几种实现方式：

2.1 利用共同父组件实现通信

最常见的方法是通过它们的共同父组件来进行数据传递。一个兄弟组件将数据传递给父组件，父组件再将数据传递给另一个兄弟组件。

示例代码：

// 父组件
import React, { useState } from 'react';
import BrotherOne from './BrotherOne';
import BrotherTwo from './BrotherTwo';

const Parent = () => {
  const [sharedData, setSharedData] = useState("");

  const handleData = (data) => {
    setSharedData(data);
  };

  return (
    <div>
      <h1>Parent Component</h1>
      <BrotherOne sendData={handleData} />
      <BrotherTwo receivedData={sharedData} />
    </div>
  );
};

export default Parent;

// 兄弟组件One
import React from 'react';

const BrotherOne = ({ sendData }) => {
  const sendMessage = () => {
    sendData("Hello from Brother One");
  };

  return (
    <div>
      <h2>Brother One</h2>
      <button onClick={sendMessage}>Send Message to Brother Two</button>
    </div>
  );
};

export default BrotherOne;

// 兄弟组件Two
import React from 'react';

const BrotherTwo = ({ receivedData }) => {
  return (
    <div>
      <h2>Brother Two</h2>
      <p>Received: {receivedData}</p>
    </div>
  );
};

export default BrotherTwo;

解析：

在这个例子中，BrotherOne通过调用父组件传递的sendData函数将数据发送给父组件，父组件将数据存储在sharedData状态中，并通过props将其传递给BrotherTwo，实现了兄弟组件之间的数据传递。

2.2 使用Event Bus进行通信

另一种方法是使用事件总线（Event Bus）来进行兄弟组件间的通信。事件总线可以是一个简单的发布/订阅模式实现，允许组件之间通过事件来传递数据。

示例代码：

// EventBus.js
import { EventEmitter } from 'events';
const eventBus = new EventEmitter();
export default eventBus;

// 兄弟组件One
import React from 'react';
import eventBus from './EventBus';

const BrotherOne = () => {
  const sendMessage = () => {
    eventBus.emit('message', 'Hello from Brother One');
  };

  return (
    <div>
      <h2>Brother One</h2>
      <button onClick={sendMessage}>Send Message</button>
    </div>
  );
};

export default BrotherOne;

// 兄弟组件Two
import React, { useEffect, useState } from 'react';
import eventBus from './EventBus';

const BrotherTwo = () => {
  const [message, setMessage] = useState('');

  useEffect(() => {
    const handleMessage = (msg) => {
      setMessage(msg);
    };

    eventBus.on('message', handleMessage);

    return () => {
      eventBus.off('message', handleMessage);
    };
  }, []);

  return (
    <div>
      <h2>Brother Two</h2>
      <p>Received Message: {message}</p>
    </div>
  );
};

export default BrotherTwo;

解析：

通过引入一个事件总线EventBus，BrotherOne可以通过eventBus.emit发布消息，BrotherTwo通过eventBus.on监听消息，实现了无需共同父组件的兄弟组件间通信。这种方法适用于组件层级较深或彼此关系较远的场景。

**注意：**使用事件总线可能会导致代码难以维护，建议在必要时使用，更复杂的应用可以考虑使用Context API或状态管理库。

【GPT-o1】（三）支持Open API调用、自定义助手、文件上传等强大功能，助您提升工作效率！ >>> - CodeMoss & ChatGPT-AI中文版在这里插入图片描述

跨层级组件通信

在实际项目中，组件层级往往比较深，传统的props传递和状态提升方法会变得笨重。此时，可以考虑使用以下几种方法实现跨层级的组件通信：

3.1 Context API

React的Context API提供了一种无需通过组件层层传递props即可在组件树中共享数据的方式，适用于全局主题、用户信息等场景。

示例代码：

// ThemeContext.js
import React from 'react';

const ThemeContext = React.createContext('light');

export default ThemeContext;

// 父组件
import React, { useState } from 'react';
import ThemeContext from './ThemeContext';
import DeepChild from './DeepChild';

const Parent = () => {
  const [theme, setTheme] = useState('light');

  const toggleTheme = () => {
    setTheme(prev => prev === 'light' ? 'dark' : 'light');
  };

  return (
    <ThemeContext.Provider value={theme}>
      <div>
        <h1>Parent Component</h1>
        <button onClick={toggleTheme}>Toggle Theme</button>
        <DeepChild />
      </div>
    </ThemeContext.Provider>
  );
};

export default Parent;

// 深层子组件
import React, { useContext } from 'react';
import ThemeContext from './ThemeContext';

const DeepChild = () => {
  const theme = useContext(ThemeContext);
  
  return (
    <div>
      <h2>Deep Child Component</h2>
      <p>Current Theme: {theme}</p>
    </div>
  );
};

export default DeepChild;

解析：

通过ThemeContext.Provider将theme值提供给整个组件树，DeepChild组件通过useContext钩子直接获取到theme值，无需通过中间层级组件传递props，实现了跨层级的通信。

3.2 Redux状态管理

Redux是一个流行的状态管理库，适用于大型应用中复杂的状态管理需求。通过集中式的Store，组件可以方便地读取和更新全局状态。

示例代码：

// store.js
import { createStore } from 'redux';

const initialState = {
  message: ''
};

const reducer = (state = initialState, action) => {
  switch(action.type) {
    case 'SET_MESSAGE':
      return { ...state, message: action.payload };
    default:
      return state;
  }
};

const store = createStore(reducer);

export default store;

// 父组件
import React from 'react';
import { Provider } from 'react-redux';
import store from './store';
import BrotherOne from './BrotherOne';
import BrotherTwo from './BrotherTwo';

const Parent = () => {
  return (
    <Provider store={store}>
      <div>
        <h1>Parent Component</h1>
        <BrotherOne />
        <BrotherTwo />
      </div>
    </Provider>
  );
};

export default Parent;

// 兄弟组件One
import React from 'react';
import { useDispatch } from 'react-redux';

const BrotherOne = () => {
  const dispatch = useDispatch();

  const sendMessage = () => {
    dispatch({ type: 'SET_MESSAGE', payload: 'Hello from Brother One' });
  };

  return (
    <div>
      <h2>Brother One</h2>
      <button onClick={sendMessage}>Send Message</button>
    </div>
  );
};

export default BrotherOne;

// 兄弟组件Two
import React from 'react';
import { useSelector } from 'react-redux';

const BrotherTwo = () => {
  const message = useSelector(state => state.message);

  return (
    <div>
      <h2>Brother Two</h2>
      <p>Received Message: {message}</p>
    </div>
  );
};

export default BrotherTwo;

解析：

通过Redux的Provider将Store提供给整个应用，BrotherOne组件通过useDispatch发送动作来更新Store，BrotherTwo组件通过useSelector获取Store中的数据，实现了全局状态的共享和更新。

3.3 使用React Hooks

React Hooks如useReducer和useContext的结合也可以实现复杂的状态管理需求，提供更灵活的状态管理方式。

示例代码：

// GlobalState.js
import React, { useReducer, createContext } from 'react';

const initialState = { message: '' };
const GlobalStateContext = createContext(initialState);
const GlobalDispatchContext = createContext(() => {});

const reducer = (state, action) => {
  switch(action.type) {
    case 'SET_MESSAGE':
      return { ...state, message: action.payload };
    default:
      return state;
  }
};

const GlobalProvider = ({ children }) => {
  const [state, dispatch] = useReducer(reducer, initialState);

  return (
    <GlobalDispatchContext.Provider value={dispatch}>
      <GlobalStateContext.Provider value={state}>
        {children}
      </GlobalStateContext.Provider>
    </GlobalDispatchContext.Provider>
  );
};

export { GlobalProvider, GlobalStateContext, GlobalDispatchContext };

// 父组件
import React from 'react';
import { GlobalProvider } from './GlobalState';
import BrotherOne from './BrotherOne';
import BrotherTwo from './BrotherTwo';

const Parent = () => {
  return (
    <GlobalProvider>
      <div>
        <h1>Parent Component</h1>
        <BrotherOne />
        <BrotherTwo />
      </div>
    </GlobalProvider>
  );
};

export default Parent;

// 兄弟组件One
import React, { useContext } from 'react';
import { GlobalDispatchContext } from './GlobalState';

const BrotherOne = () => {
  const dispatch = useContext(GlobalDispatchContext);

  const sendMessage = () => {
    dispatch({ type: 'SET_MESSAGE', payload: 'Hello from Brother One' });
  };

  return (
    <div>
      <h2>Brother One</h2>
      <button onClick={sendMessage}>Send Message</button>
    </div>
  );
};

export default BrotherOne;

// 兄弟组件Two
import React, { useContext } from 'react';
import { GlobalStateContext } from './GlobalState';

const BrotherTwo = () => {
  const { message } = useContext(GlobalStateContext);

  return (
    <div>
      <h2>Brother Two</h2>
      <p>Received Message: {message}</p>
    </div>
  );
};

export default BrotherTwo;

解析：

通过组合useReducer和useContext, GlobalProvider提供了一个全局状态和调度函数。BrotherOne通过useContext获取到dispatch来更新状态，BrotherTwo通过useContext获取到全局状态，实现了跨层级组件的通信。这种方式较为灵活，适合中小型项目。

实际案例分析

为了更好地理解上述通信方式，下面通过具体案例进行深入分析。

4.1 父子组件通信实例

场景： 一个简单的表单，用户在子组件中输入信息，父组件接收并显示用户输入的数据。

实现步骤：

父组件定义一个状态，用于存储子组件输入的数据。
父组件将一个回调函数传递给子组件，用于接收数据。
子组件在输入框变化时调用回调函数，将数据传回父组件。
父组件接收数据并更新状态，重新渲染显示。

完整代码：

// Parent.js
import React, { useState } from 'react';
import ChildForm from './ChildForm';

const Parent = () => {
  const [userInput, setUserInput] = useState('');

  const handleInputChange = (input) => {
    setUserInput(input);
  };

  return (
    <div>
      <h1>Parent Component</h1>
      <ChildForm onInputChange={handleInputChange} />
      <p>Received Input: {userInput}</p>
    </div>
  );
};

export default Parent;

// ChildForm.js
import React from 'react';

const ChildForm = ({ onInputChange }) => {
  const handleChange = (e) => {
    onInputChange(e.target.value);
  };

  return (
    <div>
      <h2>Child Form</h2>
      <input type="text" onChange={handleChange} placeholder="Enter text" />
    </div>
  );
};

export default ChildForm;

解析：

这个实例展示了如何通过props和回调函数实现父子组件间的数据传递。父组件Parent通过handleInputChange函数接收子组件ChildForm传递的数据，并更新userInput状态，最终在父组件中显示出来。

4.2 兄弟组件通信实例

场景： 一个商品列表组件和一个购物车组件，用户在商品列表中选择商品，购物车组件实时显示选择的商品。

实现步骤：

通过共同父组件管理购物车状态。
商品列表组件通过回调函数将选中的商品添加到购物车。
购物车组件通过props接收并显示购物车中的商品。

完整代码：

// Parent.js
import React, { useState } from 'react';
import ProductList from './ProductList';
import ShoppingCart from './ShoppingCart';

const Parent = () => {
  const [cart, setCart] = useState([]);

  const addToCart = (product) => {
    setCart(prevCart => [...prevCart, product]);
  };

  return (
    <div>
      <h1>Shopping App</h1>
      <ProductList onAdd={addToCart} />
      <ShoppingCart items={cart} />
    </div>
  );
};

export default Parent;

// ProductList.js
import React from 'react';

const products = [
  { id: 1, name: '苹果', price: 3 },
  { id: 2, name: '香蕉', price: 2 },
  { id: 3, name: '橘子', price: 4 }
];

const ProductList = ({ onAdd }) => {
  return (
    <div>
      <h2>商品列表</h2>
      <ul>
        {products.map(product => (
          <li key={product.id}>
            {product.name} - ¥{product.price}
            <button onClick={() => onAdd(product)}>添加到购物车</button>
          </li>
        ))}
      </ul>
    </div>
  );
};

export default ProductList;

// ShoppingCart.js
import React from 'react';

const ShoppingCart = ({ items }) => {
  const total = items.reduce((sum, item) => sum + item.price, 0);

  return (
    <div>
      <h2>购物车</h2>
      {items.length === 0 ? (
        <p>购物车为空</p>
      ) : (
        <ul>
          {items.map((item, index) => (
            <li key={index}>{item.name} - ¥{item.price}</li>
          ))}
        </ul>
      )}
      <p>总价: ¥{total}</p>
    </div>
  );
};

export default ShoppingCart;

解析：

在这个实例中，Parent组件管理购物车的状态cart。ProductList组件通过onAdd回调函数将选中的商品添加到购物车，ShoppingCart组件通过props接收并显示购物车中的商品列表。这种方式简单明了，适用于大部分兄弟组件通信的场景。

4.3 跨层级组件通信实例

场景： 一个主题切换功能，用户可以在任意位置切换应用主题，所有组件实时更新显示对应主题。

实现步骤：

创建一个ThemeContext来管理主题状态。
通过ThemeProvider将主题状态提供给整个组件树。
任意组件可以通过useContext获取和更新主题状态。

完整代码：

// ThemeContext.js
import React, { createContext, useState } from 'react';

const ThemeContext = createContext();

const ThemeProvider = ({ children }) => {
  const [theme, setTheme] = useState('light');

  const toggleTheme = () => {
    setTheme(prev => prev === 'light' ? 'dark' : 'light');
  };

  return (
    <ThemeContext.Provider value={{ theme, toggleTheme }}>
      {children}
    </ThemeContext.Provider>
  );
};

export { ThemeProvider, ThemeContext };

// App.js
import React from 'react';
import { ThemeProvider } from './ThemeContext';
import Header from './Header';
import Content from './Content';
import Footer from './Footer';

const App = () => {
  return (
    <ThemeProvider>
      <div>
        <Header />
        <Content />
        <Footer />
      </div>
    </ThemeProvider>
  );
};

export default App;

// Header.js
import React, { useContext } from 'react';
import { ThemeContext } from './ThemeContext';

const Header = () => {
  const { theme, toggleTheme } = useContext(ThemeContext);

  const headerStyle = {
    padding: '20px',
    backgroundColor: theme === 'light' ? '#f1f1f1' : '#333',
    color: theme === 'light' ? '#000' : '#fff'
  };

  return (
    <header style={headerStyle}>
      <h1>React主题切换示例</h1>
      <button onClick={toggleTheme}>切换主题</button>
    </header>
  );
};

export default Header;

// Content.js
import React, { useContext } from 'react';
import { ThemeContext } from './ThemeContext';

const Content = () => {
  const { theme } = useContext(ThemeContext);

  const contentStyle = {
    padding: '20px',
    backgroundColor: theme === 'light' ? '#fff' : '#555',
    color: theme === 'light' ? '#000' : '#fff'
  };

  return (
    <main style={contentStyle}>
      <p>这是内容区域，当前主题为 {theme}。</p>
    </main>
  );
};

export default Content;

// Footer.js
import React, { useContext } from 'react';
import { ThemeContext } from './ThemeContext';

const Footer = () => {
  const { theme } = useContext(ThemeContext);

  const footerStyle = {
    padding: '20px',
    backgroundColor: theme === 'light' ? '#f1f1f1' : '#333',
    color: theme === 'light' ? '#000' : '#fff'
  };

  return (
    <footer style={footerStyle}>
      <p>版权所有 &copy; 2023</p>
    </footer>
  );
};

export default Footer;

解析：

通过ThemeContext，应用中的Header、Content和Footer组件都能够访问和响应主题状态的变化。用户点击Header中的切换按钮，触发toggleTheme函数，所有相关组件实时更新显示对应的主题样式，实现了跨层级的主题切换功能。

最佳实践与优化

在实际开发中，合理选择和组合组件通信方式，可以显著提升代码的可维护性和项目的性能。以下是一些最佳实践和优化建议：

5.1 避免不必要的状态提升

虽然状态提升可以方便地实现数据共享，但过度提升会导致组件结构复杂，增加不必要的渲染。应根据实际需求，合理提升状态，避免将状态提升到过高的层级。

5.2 合理选择通信方式

不同的通信方式适用于不同的场景：

父子通信： 使用props和回调函数，简单高效。
兄弟通信： 通过共同父组件或Context API，实现灵活的数据共享。
跨层级通信： 使用Redux或其他状态管理库，适用于复杂的全局状态需求。

5.3 性能优化建议

组件通信的方式选择直接影响到应用的渲染性能：

避免不必要的重新渲染： 使用React.memo、useMemo和useCallback等优化手段，减少组件的重复渲染。
选择合适的状态管理工具： 对于频繁更新的全局状态，选择性能较优的状态管理工具，如Recoil、Zustand等。
合理拆分组件： 将大组件拆分为小组件，降低每个组件的渲染成本。

结语

React组件之间的通信方式多种多样，每种方式都有其适用的场景和优缺点。希望本文能为你的React开发之路提供有价值的参考和指导。