Question

我有一个从Firebase接收数据的应用程序，

const projectsRef = fire.database().ref('projects').orderByKey().limitToLast(limit);
projectsRef.on('child_added', (snapshot) => {
  const project = { ...snapshot.val(), id: snapshot.key };
  console.log(project);
  this.setState(prevState => ({
    ...prevState,
    projects: [...prevState.projects, project],
  }));
});

我有一百条记录，上面的侦听器被调用一百次，并且通过对组件的render（）方法的调用将ProjectsTable组件重新渲染一百次。一切都很好，但直到完成所有操作，然后再延迟大约两秒钟，我才真正看到数据显示在屏幕上的ProjectsTable中。

为什么在每次render（）调用具有更新数据的组件后，屏幕仍未重绘，我该如何解决？

Answer 1

问题在于JavaScript是单线程的，因此每10毫秒调用一次render（）是一个糟糕的主意。最好在收到所有数据之后只调用一次setState（调用了render），而不是在收到每条记录之后才调用一次。因此，我设置了一个100ms的计时器来调用render（）-每次有另一条记录进入时都会重置该计时器。数据加载非常快-然后只需调用一次render（），结果就会显示在屏幕上。很快！

const projectsRef = fire.database().ref('projects').orderByKey().limitToLast(limit);
projectsRef.on('child_added', (snapshot) => {
  const project = { ...snapshot.val(), id: snapshot.key };
  this.projects.push(project);
  clearTimeout(this.timer);
  this.timer = setTimeout(() => {
    this.setState(prevState => ({
      ...prevState,
      projects: this.projects,
    }));
  }, 100);
});

反应：render（）和在屏幕上看到结果之间的延迟

1 个答案: