在 React 中，组件是构建应用的基本单位。随着应用的复杂度提升，多个组件之间的协作和数据传递变得越来越重要。React 提供了几种方式来实现组件之间的通信：父子组件通信、兄弟组件通信、跨层级组件通信 等。
一、React 组件通信原理
React 中的组件通信原理基于 单向数据流 。这意味着数据总是从父组件流向子组件，通过 props 传递。对于更复杂的组件间通信，React 提供了多种方案。
1. 单向数据流
React 中的数据流是单向的，即父组件向子组件传递数据，子组件不能直接修改父组件的状态。父组件可以通过 props 向子组件传递数据，子组件则可以通过回调函数来通知父组件更新数据。
2. 状态提升 (Lifting State Up)
为了让多个子组件共享状态，React 提供了"状态提升"这一概念。即将多个组件所需的状态提升到它们的共同父组件中，然后通过 props 传递给各个子组件。
3. Context API
对于跨多个层级的组件通信，React 提供了 Context API ，允许我们在组件树中传递数据而不需要显式地通过 props 逐层传递。
二、常用的 React 组件通信方法
在 React 中，常见的组件通信方法包括：
- 父子组件通信 （通过
props和state） - 兄弟组件通信（通过父组件作为中介）
- 跨层级组件通信 （通过
Context API）
1. 父子组件通信
父子组件通信是 React 中最基本的通信方式。父组件通过 props 将数据传递给子组件，子组件则通过调用父组件传递的函数来更新父组件的状态。
示例代码：父子组件通信
javascript
// 父组件
import React, { useState } from 'react';
import ChildComponent from './ChildComponent';
const ParentComponent = () => {
const [message, setMessage] = useState("Hello from parent!");
// 子组件更新父组件的状态
const updateMessage = (newMessage) => {
setMessage(newMessage);
};
return (
<div>
<h1>{message}</h1>
<ChildComponent onMessageChange={updateMessage} />
</div>
);
};
export default ParentComponent;
javascript
// 子组件
import React, { useState } from 'react';
const ChildComponent = ({ onMessageChange }) => {
const [newMessage, setNewMessage] = useState("");
const handleChange = (e) => {
setNewMessage(e.target.value);
};
const handleClick = () => {
onMessageChange(newMessage);
};
return (
<div>
<input type="text" value={newMessage} onChange={handleChange} />
<button onClick={handleClick}>Change Parent Message</button>
</div>
);
};
export default ChildComponent;在这个例子中，ParentComponent 通过 props 向 ChildComponent 传递了一个函数 updateMessage，而子组件通过 onMessageChange 调用该函数，从而修改父组件的状态。
2. 兄弟组件通信
兄弟组件之间无法直接通信，它们需要通过共同的父组件来传递数据。这种方式称为"通过父组件进行通信"。
1. 使用共同父组件传递 Props
示例代码：
javascript
// 父组件
import React, { useState } from 'react';
import BrotherOne from './BrotherOne';
import BrotherTwo from './BrotherTwo';
const ParentComponent = () => {
const [sharedData, setSharedData] = useState("");
const updateSharedData = (newData) => {
setSharedData(newData);
};
return (
<div>
<BrotherOne onDataChange={updateSharedData} />
<BrotherTwo data={sharedData} />
</div>
);
};
export default ParentComponent;
javascript
// 兄弟组件 One
import React, { useState } from 'react';
const BrotherOne = ({ onDataChange }) => {
const [inputData, setInputData] = useState("");
const handleChange = (e) => {
setInputData(e.target.value);
};
const handleSubmit = () => {
onDataChange(inputData);
};
return (
<div>
<input type="text" value={inputData} onChange={handleChange} />
<button onClick={handleSubmit}>Send to Brother Two</button>
</div>
);
};
export default BrotherOne;
javascript
// 兄弟组件 Two
import React from 'react';
const BrotherTwo = ({ data }) => {
return <div>Received from Brother One: {data}</div>;
};
export default BrotherTwo;在这个例子中，BrotherOne 通过触发 ParentComponent 中传递的回调函数来更新父组件的状态，然后父组件将该状态通过 props 传递给 BrotherTwo，从而实现兄弟组件之间的数据传递。
2. 使用 React Context 实现兄弟组件传值
示例代码：
javascript
import React, { createContext, useState, useContext } from 'react';
// 创建一个 Context
const MessageContext = createContext();
const BrotherA = () => {
const { setMessage } = useContext(MessageContext);
return (
<div>
<button onClick={() => setMessage('来自 BrotherA 的消息')}>
发送消息到 BrotherB
</button>
</div>
);
};
const BrotherB = () => {
const { message } = useContext(MessageContext);
return <div>BrotherB 收到的消息: {message}</div>;
};
const Parent = () => {
const [message, setMessage] = useState('');
return (
<MessageContext.Provider value={{ message, setMessage }}>
<div>
<BrotherA />
<BrotherB />
</div>
</MessageContext.Provider>
);
};
export default Parent;
我们通过
createContext创建了一个MessageContext，它存储了共享的数据（即message）。
MessageContext.Provider包裹了BrotherA和BrotherB组件，将共享的数据传递给它们。
BrotherA和BrotherB通过useContext(MessageContext)获取上下文中的数据。
BrotherA更新message，BrotherB接收并展示更新后的信息。使用 Context 的方式解决了组件层级深时，prop drilling（层层传递 props）的问题，简化了兄弟组件间的通信。
3. 使用 Redux 实现兄弟组件通信
示例代码：Redux 不仅适用于兄弟组件之间的传值，也能用于整个应用的数据流管理。
javascript
import React from 'react';
import { createStore } from 'redux';
import { Provider, useDispatch, useSelector } from 'react-redux';
// 定义初始状态和 Reducer
const initialState = { message: '' };
const messageReducer = (state = initialState, action) => {
switch (action.type) {
case 'SET_MESSAGE':
return { ...state, message: action.payload };
default:
return state;
}
};
// 创建 Redux store
const store = createStore(messageReducer);
const BrotherA = () => {
const dispatch = useDispatch();
return (
<div>
<button onClick={() => dispatch({ type: 'SET_MESSAGE', payload: '来自 BrotherA 的消息' })}>
发送消息到 BrotherB
</button>
</div>
);
};
const BrotherB = () => {
const message = useSelector((state) => state.message);
return <div>BrotherB 收到的消息: {message}</div>;
};
const Parent = () => {
return (
<Provider store={store}>
<div>
<BrotherA />
<BrotherB />
</div>
</Provider>
);
};
export default Parent;
- 使用 Redux 创建了一个全局状态
message，通过useDispatch发送 action 来更新它。BrotherA通过 dispatch 修改全局状态，BrotherB通过useSelector获取并展示这个状态。Provider组件将 Redux store 提供给了应用中的所有组件。Redux 适用于较复杂的应用，尤其是当多个组件需要访问和更新全局状态时。
4.使用自定义事件（Pub/Sub 模式）
代码示例： import PubSub from 'pubsub-js' 插件
javascript
import React, { useState, useEffect } from 'react';
import PubSub from 'pubsub-js'
const Brother1 = () => {
const sendMessage = () => {
PubSub.publish("Hello from Brother 1");
};
return (
<div>
<button onClick={sendMessage}>Send Message to Brother 2</button>
</div>
);
};
const Brother2 = () => {
const [message, setMessage] = useState("");
useEffect(() => {
const handleMessage = (newMessage) => {
setMessage(newMessage);
};
PubSub.subscribe(handleMessage);
// 清理订阅
return () => {
PubSub.unsubscribe(handleMessage)
};
}, []);
return <div>Received message: {message}</div>;
};
const Parent = () => {
return (
<div>
<Brother1 />
<Brother2 />
</div>
);
};
export default Parent;我们使用一个pubsub-js插件, 来实现发布-订阅机制。
Brother1组件通过PubSub.publish 发一个message,Brother2组件通过PubSub.subscribe 接收