时间戳

首页 > 解决方案 > 在安装时设置一次订阅，并且每次更新都不刷新它？

reactjs - 在安装时设置一次订阅，并且每次更新都不刷新它？

问题描述

我useEffect在一个简单的功能组件中创建了以下 firebase 订阅：

  const [messages, setMessages] = useState([]);

  useEffect(() => {
    const unsubscribe = db.collection('chatChannels').doc('general')
      .onSnapshot(snapshot => {
        if (snapshot.data()) {
          setMessages(snapshot.data().messages);
        } else {
          console.log('it was empty');
        }
      })
    return () => {
      unsubscribe();
    };
  });

这旨在从集合中的文档中检索messages字段的内容。换句话说，我正在尝试建立一个简单的即时通讯公共频道。generalchatChannels

问题是我发现这对性能有问题。任何时候发送消息，都会更新状态，取消订阅，useEffect触发并重新创建订阅。这是很多不必要的网络往返。我想避免这种情况。但是我想不出一种方法来设置它，以便新消息更新状态而无需每次都重新订阅。

我确实想在组件完全卸载时取消订阅，但不是每次更新时。我不清楚这是否可能。

标签： reactjsgoogle-cloud-firestorereact-hooksuse-effect

解决方案

将一个空依赖项[]传递给useEffect钩子，它会表现componentDidMount和componentWillUnmount.

useEffect(() => {
    const unsubscribe = db.collection('chatChannels').doc('general')
      .onSnapshot(snapshot => {
        if (snapshot.data()) {
          setMessages(snapshot.data().messages);
        } else {
          console.log('it was empty');
        }
      })
    return () => {
      unsubscribe();
    };
  }, []);

这是官方useEffect文档的链接：https ://reactjs.org/docs/hooks-effect.html#tip-optimizing-performance-by-skipping-effects

推荐阅读