Javascript 在同一引用上有多个侦听器时，从Firebase中删除侦听器

我需要侦听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} />
            );
        }
    };
};

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上的引用中删除特定的侦听器？

您可以精确地控制删除哪些侦听器。这里的关键是您需要有一个回调函数的引用。使用匿名函数声明，您可以从

on（）

获取该引用作为返回值：

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

ref.off('child_changed', listener);

另请参见和的参考文档

ref.off('child_changed', listener);