1.在做这个图书订阅管理系统时，遇到一个这样的业务逻辑：

就是这样的逻辑：： 点击设置---》选择书籍---》点击提交按钮--》轮播图展示

这是订阅的代码，没有啥问题，页面挂载的时候，订阅，卸载的时候取消订阅

const [imgs, setImglist] = useState([{ id: '001', name: "示例1", author: '示例1', publisher: '示例1', img: '' }]);
    useEffect(() => {
        let token = PubSub.subscribe('imgs', (msg, data) => {
            console.log(msg, data)
            setImglist(data)
        })
        console.log(token)
        return () => { console.log(token); PubSub.unsubscribe(token); }
    }, [imgs])

这是发布的代码，单击按钮时发布

  const toRatotionChart = ()=>{
    console.log(imgList)
    PubSub.publish('imgs',imgList);
    // navigate('/admin')
  }

我遇到的情况是，当加入return () => { console.log(token); PubSub.unsubscribe(token); }时，代码就不会进入到订阅的回调函数，，导致获取不到数据。去掉，又会产生很多的订阅，逻辑上就是不能去掉的。

解决办法，找了很久，通过不断地新测试，发现useEffect的使用，在AB组件通信时，A订阅，B发布，当B跳向A所在的页面时，A不会刷新的情况下，上述合理的代码才会正常，也就是说当useEffect在A中监测B发布数据的变化时，A不能刷新，让A组件与B组件处于同一页面。

以上图为例子，蓝色框代表A，红色框代表B，如果这个红色框B在新的页面，A通过上面的代码是拿不到数据的，因为这个时候，红色框组件点击提交后要跳转到蓝色框A组件，A被重新渲染了，又重新订阅了一次每一次订阅应该是不同的，A第一次给的是uid0，但是当接受的时候已经变成uid1了。

这是个人理解，效果有效，如果届时不对，麻烦指正，感谢

搜索

复制