在react中使用publish-subscribe可以使组件卸载和装载

Question

我正在尝试在reactjs中实现pubsub(发布-订阅(。每次侦听事件后，组件都会卸载，然后再次装载。以下是组件：

组件A

单击按钮后，发布一个带有有效负载的事件(即项(。

import PubSub from 'pubsub-js';
import React from 'react';
import { Button } from 'react-native';
interface ComponentAProps {}
const ComponentA: React.FC<ComponentAProps> = ({}) => {
return (
<Button
title="add items"
onPress={() => {
console.log('published')
PubSub.publish('ADD_ITEMS', { item: { title: 'someItem' } })
}
}
/>
);
};
export default ComponentA;

组件B

侦听事件(如果有(，将有效负载添加到项中。渲染项目。

import React, { useEffect, useState } from 'react';
import { Text, View } from 'react-native';
interface ComponentBProps {}
interface IItem {
title: string;
}
type IItems = IItem[];
const ComponentB: React.FC<ComponentBProps> = ({}) => {
const [items, setItems] = useState<IItems>([]);
useEffect(() => {
console.log('mounted');
/**
* add item to items
*/
PubSub.subscribe('ADD_ITEMS', (item: IItem) => {
setItems([...items, item]);
});
return () => {
console.log('unmounted');
PubSub.unsubscribe('ADD_ITEMS');
};
});
let renderItems = items.map((item) => (
<View>
<Text>{item.title}</Text>
</View>
));
return <View>{renderItems}</View>;
};
export default ComponentB;

如果按钮被点击3次，以下是日志的输出：

• 已安装
• 已发布
• 未安装
• 已安装
• 已发布
• 未安装
• 已安装
• 已发布
• 未安装
• 已安装

Answer 1

您是否尝试在useEffect中添加第二个参数以便像componentDidMount一样使用它？我说的是空数组[]。您现在实现它的方式与componentDidUpdate相同，并在每个转发器上运行。

你可以在这里阅读更多