ComponentA

Question

我正在尝试在reactjs中实现pubsub（publish-subscribe）。每次侦听事件时，都会卸载组件，然后再次安装。以下是组件：

ComponentA

单击按钮时，发布带有有效内容（即项目）的事件。

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;

ComponentB

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

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相同，并在每次重新渲染时运行。

您可以read more here

在反应中使用发布订阅可以使组件卸载和挂载

ComponentA

ComponentB

1 个答案: