在 React 中，组件是构建用户界面的基本单元。有时我们需要在不同组件之间进行数据传递或事件处理。这里将详细介绍小节（子组件）之间的通信方法。
1. 升级与降级数据
在 React 中，数据是通过props（属性）从父组件传递到子组件的。而子组件不能直接更新父组件的状态。如果需要在子组件中处理数据，我们通常使用数据提升的方法，将状态提升到共同的父组件中。
1.1 父组件中的状态
首先，创建一个父组件来管理状态：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| import React, { useState } from 'react';
import ChildA from './ChildA';
import ChildB from './ChildB';
const Parent = () => {
const [data, setData] = useState('');
return (
<div>
<ChildA setData={setData} />
<ChildB data={data} />
</div>
);
};
export default Parent;
|
1.2 子组件 A（发送数据）
子组件 A 可以通过调用 setData 函数来更新父组件的状态：
1
2
3
4
5
6
7
8
9
10
11
12
13
| import React from 'react';
const ChildA = ({ setData }) => {
const handleChange = (e) => {
setData(e.target.value);
};
return (
<input type="text" onChange={handleChange} placeholder="Type something..." />
);
};
export default ChildA;
|
1.3 子组件 B（接收数据）
子组件 B 通过 props 接收父组件传来的数据：
1
2
3
4
5
6
7
| import React from 'react';
const ChildB = ({ data }) => {
return <div>Received data: {data}</div>;
};
export default ChildB;
|
1.4 整体效果
父组件将状态提升到父级，并通过 props 传递给子组件 A 和子组件 B。子组件 A 更新状态，子组件 B 根据变化自动渲染。
2. 通过 Context API 实现组件间通信
在某些情况下，当多个层级的子组件需要共享数据时，使用 Context API 是一个不错的选择。
2.1 创建 Context
首先，创建一个上下文（Context）：
1
2
3
4
5
6
7
8
9
10
11
12
13
| import React, { createContext, useState } from 'react';
export const MyContext = createContext();
export const MyProvider = ({ children }) => {
const [data, setData] = useState('');
return (
<MyContext.Provider value={{ data, setData }}>
{children}
</MyContext.Provider>
);
};
|
2.2 使用 Context 提供数据
在父组件中使用 MyProvider 来包裹子组件：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| import React from 'react';
import { MyProvider } from './MyContext';
import ChildA from './ChildA';
import ChildB from './ChildB';
const Parent = () => {
return (
<MyProvider>
<ChildA />
<ChildB />
</MyProvider>
);
};
export default Parent;
|
2.3 子组件 A（使用 Context）
子组件 A 从上下文中获取 setData 函数：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| import React, { useContext } from 'react';
import { MyContext } from './MyContext';
const ChildA = () => {
const { setData } = useContext(MyContext);
const handleChange = (e) => {
setData(e.target.value);
};
return (
<input type="text" onChange={handleChange} placeholder="Type something..." />
);
};
export default ChildA;
|
2.4 子组件 B（使用 Context）
子组件 B 从上下文中获取 data：
1
2
3
4
5
6
7
8
9
10
| import React, { useContext } from 'react';
import { MyContext } from './MyContext';
const ChildB = () => {
const { data } = useContext(MyContext);
return <div>Received data: {data}</div>;
};
export default ChildB;
|
2.5 整体效果
通过 Context API，我们成功地实现了没有直接层级关系的多个组件之间的数据共享。每当子组件 A 更新数据时，子组件 B 都会响应更新。
3. 使用事件机制
另一个组件间通信的方法是通过事件传递。这种方式通常在使用类组件时更加明显，但也可以通过 useEffect 钩子在函数组件中实现。
3.1 使用事件总线
创建一个简单的事件总线：
1
2
3
4
| import { EventEmitter } from 'events';
const eventBus = new EventEmitter();
export default eventBus;
|
3.2 发布事件
在子组件 A 中，通过事件总线发布事件：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| import React from 'react';
import eventBus from './eventBus';
const ChildA = () => {
const handleChange = (e) => {
eventBus.emit('dataChanged', e.target.value);
};
return (
<input type="text" onChange={handleChange} placeholder="Type something..." />
);
};
export default ChildA;
|
3.3 监听事件
在子组件 B 中，监听这个事件并更新状态：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
| import React, { useEffect, useState } from 'react';
import eventBus from './eventBus';
const ChildB = () => {
const [data, setData] = useState('');
useEffect(() => {
const handleDataChange = (newData) => {
setData(newData);
};
eventBus.on('dataChanged', handleDataChange);
return () => {
eventBus.off('dataChanged', handleDataChange);
};
}, []);
return <div>Received data: {data}</div>;
};
export default ChildB;
|
3.4 整体效果
通过事件机制，我们能够实现子组件之间的通信，尽管它们没有直接的层级关系。子组件 A 发布事件，子组件 B 监听并响应这个事件。
总结
在 React 中，小节组件之间的通信可以通过以下几种方式进行：
- 数提升：将组件的状态提升到共同的父组件中，然后通过
props 方式传递。
- Context API：适合深层嵌套的组件间数据传递。
- 事件机制：使用事件总线来实现非关联组件之间的通信。
选择合适的通信方式可以有效提升应用的结构和可维护性。
