Question

我需要侦听Firebase实时数据库上的引用，该引用会经常更新，因此我尝试将侦听器封装在组件中，这样，如果用户无法查看组件，侦听器将成为关闭。

我创建了一个高级组件，以避免泄漏如下所示的侦听器：

const FirebaseListener = (WrappedComponent) => {
    return class extends Component {
        state = {
            ref: null,
            data: {},
        }

        componentDidMount() {
            const { device } = this.props;

            const ref = repository.listenDevice(device.id);
            ref.once('value').then((snapshot) => {
                const data = snapshot.val();
                this.setState({ data });
            });

            ref.on('child_changed', (snapshot) => {
                const value = snapshot.val();
                const prop = snapshot.key;
                const { data } = this.state;
                this.setState({ data: { ...data, [prop]: value } });
            });
            this.setState({ ref });
        }

        componentWillUnmount() {
            const { ref } = this.state;
            if (ref !== null) {
                ref.off();
            }
        }

        render() {
            const { data } = this.state;
            return (
                <WrappedComponent data={data} {...this.props} />
            );
        }
    };
};

但是在构建应用程序的方式中，我最终在同一引用上创建了两个侦听器，并且当我调用ref.off()时，我失去了两个侦听器，这不是预期的行为。

它是这样的：

1. already          2. push configview into stack   3. has another
has listener        and adds another listener       listener
------------             ------>                 --------------
|           |                                    |             |
|           |                                    |             |
| listview  |                                    |  configview |
|  screen   |                                    |   screen    |
|           |                                    |             |
-------------            <-------                ---------------
5. doesn't have           4. pops configview from stack
listener anymore       and removes both listeners

基本上，有什么方法可以从Firebase上的引用中仅删除特定的侦听器？

Answer 1

您可以精确地控制删除哪些监听器。这里的关键是您需要引用回调函数。使用匿名函数声明，您可以从on()获取该引用作为返回值：

let listener = ref.on('child_changed', (snapshot) => {
    const value = snapshot.val();
    const prop = snapshot.key;
    const { data } = this.state;
    this.setState({ data: { ...data, [prop]: value } });
});

然后，您可以使用以下方法删除该监听器：

ref.off('child_changed', listener);

另请参阅on和off的参考文档。

当同一参考上有多个侦听器时，从Firebase中删除侦听器

1 个答案: