【react从入门到精通】React兄弟组件通信方式详解（有示例）
文章目录
- 人工智能福利文章
- 前言
- React技能树
- 通过共同的父组件传递props
- 使用React Context
- 使用Redux
- 使用EventBus
- 脑筋急转弯小程序抢先体验
✍创作者：全栈弄潮儿
个人主页： 全栈弄潮儿的个人主页
️ 个人社区，欢迎你的加入：全栈弄潮儿的个人社区
专栏地址：react从入门到精通
人工智能福利文章
- 【分享几个国内免费可用的ChatGPT镜像】
- 【10几个类ChatGPT国内AI大模型】
- 【用《文心一言》1分钟写一篇博客简直yyds】
- 【用讯飞星火大模型1分钟写一个精美的PPT】
前言
在上一篇文章《React父子组件通信方式详解》中我们了解了React父子组件通信的4中方式。
本文中我们将详细了解react兄弟组件通信方式。
React技能树
React 技能树
├── JSX
│ ├── 语法
│ ├── 元素渲染
│ ├── 组件
│ ├── Props
│ ├── State
│ └── 生命周期
├── 组件通信
│ ├── 父子组件通信
│ ├── 兄弟组件通信
│ ├── 跨级组件通信
│ ├── Context
│ └── Redux
├── 样式
│ ├── 内联样式
│ ├── CSS Modules
│ └── Styled Components
├── 路由
│ ├── React Router
│ ├── 动态路由
│ └── 嵌套路由
├── 数据请求
│ ├── Axios
│ ├── Fetch
│ └── GraphQL
├── 状态管理
│ ├── Redux
│ ├── MobX
│ └── Recoil
├── 常用库和框架
│ ├── Ant Design
│ ├── Material UI
│ ├── Bootstrap
│ ├── Semantic UI
│ └── Tailwind CSS
├── 测试
│ ├── Jest
│ ├── Enzyme
│ └── React Testing Library
├── 构建工具
│ ├── Webpack
│ └── Parcel
└── 服务端渲染
├── Next.js
└── Gatsby
在React中，组件之间的通信可以通过父组件向子组件传递props，也可以通过子组件向父组件传递事件回调函数来实现。但是，如果兄弟组件之间需要进行通信，React并没有提供内置的方式来实现这一点。但是，我们可以通过一些技巧来实现兄弟组件之间的通信，如下所示：
通过共同的父组件传递props
// Parent Component
import React, { useState } from 'react';
import BrotherA from './BrotherA';
import BrotherB from './BrotherB';
function Parent() {
const [message, setMessage] = useState('');
const handleSend = (message) => {
setMessage(message);
}
return (
<div>
<BrotherA onSend={handleSend} />
<BrotherB message={message} />
</div>
);
}
// BrotherA Component
import React, { useState } from 'react';
function BrotherA(props) {
const [message, setMessage] = useState('');
const handleClick = () => {
props.onSend(message);
}
return (
<div>
<input type="text" value={message} onChange={(e) => setMessage(e.target.value)} />
<button onClick={handleClick}>Send</button>
</div>
);
}
// BrotherB Component
import React from 'react';
function BrotherB(props) {
return (
<div>
<p>{props.message}</p>
</div>
);
}
在上面的示例中，Parent组件作为BrotherA和BrotherB组件的父组件，它负责传递BrotherB需要的消息，同时它也传递了一个onSend回调函数给BrotherA，以便BrotherA可以调用该函数并传递消息。
使用React Context
另一种实现兄弟组件之间通信的方式是使用React Context，它可以让我们在组件之间共享数据。
在下面这个示例中，我们将使用React Context API来创建一个全局状态管理器，BrotherA和BrotherB组件都可以访问和更新该状态。我们需要在应用程序中定义一个名为MessageContext的React context，并提供一个名为setMessage的操作函数来更新message状态。
// MessageContext.js
import { createContext } from 'react';
const MessageContext = createContext({
message: '',
setMessage: () => {},
});
export default MessageContext;
在App组件中，我们需要使用MessageContext.Provider组件包装BrotherA和BrotherB组件，以便它们可以访问MessageContext。
// App.js
import BrotherA from './BrotherA';
import BrotherB from './BrotherB';
import MessageContext from './MessageContext';
function App() {
const [message, setMessage] = useState('');
return (
<div>
<MessageContext.Provider value={{ message, setMessage }}>
<BrotherA />
<BrotherB />
</MessageContext.Provider>
</div>
);
}
export default App;
在BrotherA组件中，我们可以使用useContext hook来从MessageContext中获取setMessage操作函数，并调用它来更新message状态。
// BrotherA.js
import { useContext } from 'react';
import MessageContext from './MessageContext';
function BrotherA() {
const { setMessage } = useContext(MessageContext);
function handleClick() {
setMessage('Hello from BrotherA!');
}
return (
<div>
<button onClick={handleClick}>Send message to BrotherB</button>
</div>
);
}
export default BrotherA;
在BrotherB组件中，我们也可以使用useContext hook来从MessageContext中获取message状态。
// BrotherB.js
import { useContext } from 'react';
import MessageContext from './MessageContext';
function BrotherB() {
const { message } = useContext(MessageContext);
return (
<div>
<p>Message from BrotherA: {message}</p>
</div>
);
}
export default BrotherB;
这两种方法都可以实现兄弟组件之间的通信，具体选择哪种方法取决于你的具体需求。在一些情况下，使用Context可能更方便，因为它可以减少需要传递的props的数量。但是，在其他情况下，使用父组件传递props可能更加直接和可读性更好。
除了在父组件中传递props和使用React Context之外，还有一些其他的方式可以实现兄弟组件之间的通信。以下是其中一些常见的方法：
使用Redux
使用Redux可以方便地共享状态和管理应用程序的状态，因此它也可以用于兄弟组件之间的通信。通过将状态存储在Redux store中，兄弟组件可以在需要时访问并更新该状态。这种方法需要在应用程序中引入Redux，需要在Redux store中定义状态和操作状态的函数。
在这个示例中，我们将使用Redux来管理message状态，BrotherA和BrotherB组件都可以访问和更新该状态。我们需要在应用程序中安装Redux，并定义一个包含message状态的Redux store，以及更新该状态的操作函数。
// store.js
import { createStore } from 'redux';
const initialState = { message: '' };
function messageReducer(state = initialState, action) {
switch (action.type) {
case 'SET_MESSAGE':
return { ...state, message: action.payload };
default:
return state;
}
}
export const store = createStore(messageReducer);
在BrotherA组件中，我们可以使用useSelector hook来从Redux store中获取message状态，以及使用useDispatch hook来调用setMessage操作函数。
// BrotherA.js
import { useSelector, useDispatch } from 'react-redux';
function BrotherA() {
const message = useSelector(state => state.message);
const dispatch = useDispatch();
function handleClick() {
dispatch({ type: 'SET_MESSAGE', payload: 'Hello from BrotherA!' });
}
return (
<div>
<p>Message from BrotherB: {message}</p>
<button onClick={handleClick}>Send message to BrotherB</button>
</div>
);
}
export default BrotherA;
在BrotherB组件中，我们也可以使用useSelector hook来从Redux store中获取message状态，以及使用useDispatch hook来调用setMessage操作函数。
// BrotherB.js
import { useSelector, useDispatch } from 'react-redux';
function BrotherB() {
const message = useSelector(state => state.message);
const dispatch = useDispatch();
function handleClick() {
dispatch({ type: 'SET_MESSAGE', payload: 'Hello from BrotherB!' });
}
return (
<div>
<p>Message from BrotherA: {message}</p>
<button onClick={handleClick}>Send message to BrotherA</button>
</div>
);
}
export default BrotherB;
使用EventBus
EventBus是一个事件总线，可以让组件之间通过发布和订阅事件来通信。通过使用EventBus，兄弟组件可以在需要时发布事件，并通过订阅事件来接收其他组件发送的事件。这种方法需要在应用程序中引入EventBus库，并使用事件名称来标识特定事件。
在这个示例中，我们将使用EventBus库来实现BrotherA和BrotherB组件之间的通信。我们需要在应用程序中安装EventBus库，并定义一个事件总线。在BrotherA组件中，我们可以使用EventBus来发布名为’message’的事件，并在BrotherB组件中订阅该事件。
// EventBus.js
import { EventEmitter } from 'events';
const eventBus = new EventEmitter();
export default eventBus;
在BrotherA组件中，我们可以使用EventBus来发布名为'message'的事件。
javascript
Copy code
// BrotherA.js
import eventBus from './EventBus';
function BrotherA() {
function handleClick() {
eventBus.emit('message', 'Hello from BrotherA!');
}
return (
<div>
<button onClick={handleClick}>Send message to BrotherB</button>
</div>
);
}
export default BrotherA;
在BrotherB组件中，我们可以使用EventBus来订阅名为’message’的事件，并在事件被触发时更新message状态。
// BrotherB.js
import { useState, useEffect } from 'react';
import eventBus from './EventBus';
function BrotherB() {
const [message, setMessage] = useState('');
useEffect(() => {
const handleEvent = (data) => {
setMessage(data);
};
eventBus.on('message', handleEvent);
return () => {
eventBus.off('message', handleEvent);
};
}, []);
return (
<div>
<p>Message from BrotherA: {message}</p>
</div>
);
}
export default BrotherB;
以上这些方法都可以实现兄弟组件之间的通信，但它们的实现和使用方法各有不同，具体取决于你的具体需求和应用程序的复杂性。
脑筋急转弯小程序抢先体验
✍创作不易，求关注，点赞，收藏⭐️