仅在状态更改时重新渲染反应组件

Question

你好，我是 react 和 Firebase 的新手，我想了解为什么这个组件会不断重新渲染。 基本上我想要做的是获取数据并显示它并继续监听更改并更新数据而不重新加载页面

import React, { useState, useEffect } from 'react';
import firebase from '../util/firebase';

export default function Items() {
  const [items, setItems] = useState();
  useEffect(() => {
    let data = [];
    firebase
      .firestore()
      .collection('items')
      .onSnapshot((snapshot) => {
        let changes = snapshot.docChanges();
        console.log(changes);
        changes.forEach((change) => {
          data.push(change.doc.data());
        });
        console.log(data);
      });
    setItems(data);
  }, [items]);
  return <div>{items && items.map((item) => <h1>{item.text}</h1>)}</div>;
}

Answer 1

useEffect 在其中一个依赖项发生更改时重新运行传递给它的函数。

如果我们分析当前的useEffect 函数，您可以看到它使用setItems 为items 设置了一个状态，这将导致重新渲染。但依赖也包含items。

组件安装 -> useEffect -> 设置项目 -> useEffect 检测项目更改，重新运行 -> 再次设置项目，继续。

由于您实际上并未在useEffect 中使用items，因此您可以安全地将其从依赖数组中删除。

这里的另一个危险是useSnapshot 函数是异步的，所以当编译器到达setItems 时，它还没有运行useSnapshot，因此数据将为空。为了解决这个问题，您可以将 setItems 函数移到里面：

const [items, setItems] = useState();
useEffect(() => {
  let data = [];
  firebase
    .firestore()
    .collection("items")
    .onSnapshot((snapshot) => {
      let changes = snapshot.docChanges();
      console.log(changes);
      changes.forEach((change) => {
        data.push(change.doc.data());
      });
// spreading the data here did solve my problem
      setItems([...data]);
    });
}, []);