使用 React Hooks 限制 Firebase 重新渲染答案

【问题标题】：Limit Firebase rerenders with React Hooks使用 React Hooks 限制 Firebase 重新渲染
【发布时间】：2020-04-13 14:21:06
【问题描述】：

我有一个 Firebase 实时数据库，我想通过映射列表来显示记录。

到目前为止我有：

useEffect(() => {
        dbRefObject.on('value', snap => getRecords(snap.val()))
      }, [dbRefObject, records])

我在其他地方有：

export const dbRefObject = firebase.database().ref().child('record');

我的 getRecords() 函数是：

const getRecords = (snap) => {
        let _recordsMap= []
        for (let record in snap) {
            _recordsMap.push({[record] : snap[record]})
        }

我想要某种行为，例如 useEffect 返回的 unsubscribe() 函数，但我无法让它工作？

useEffect(() => {
        const unsubscribe = () => {dbRefObject.on('value', snap => getRecords(snap.val()))}
        return () => {
            unsubscribe()
        }
      }, [dbRefObject, records])

【问题讨论】：

你想要什么？只获得一次性价值？因为 unsubscribe 在组件卸载时调用，而不是在获取值之后调用
我想得到整个记录列表，我只是不想让它一直重新渲染

标签： reactjs firebase react-hooks

【解决方案1】：

你需要调用 dbRefObject.off("value", originalCallback);

查看https://firebase.google.com/docs/database/admin/retrieve-data#section-detaching-callbacks

【讨论】：

或 dbRefObject.once("value");