反应：渲染（）和在屏幕上看到结果之间的延迟答案

【问题标题】：React: delay between render() and seeing result on screen反应：渲染（）和在屏幕上看到结果之间的延迟
【发布时间】：2018-07-17 23:51:07
【问题描述】：

我有一个从 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() 调用更新数据的组件后屏幕没有被重绘，我该如何解决这个问题？

【问题讨论】：

我不确定 Firebase 是如何工作的，但是否所有数据都在一个请求中加载，并且 child_added 与查询中的每个项目一个接一个地同步调用？ 2 秒的渲染可能只是因为您的每个项目都难以渲染。
但是我正在记录对 render() 的调用，并且在上面的侦听器接收到每条记录后，我看到了一个渲染调用。每次使用一条记录调用侦听器。
是的，我知道监听器一次调用一条记录，但我不确定底层逻辑是否是异步的。我误解了你的问题。如果在每个新项目调用 setState 之前设置的超时时间越来越长，它是否按预期工作？ IE。 project1 为 100 毫秒，project2 为 200 毫秒，等等。
也许吧，但我只是在github.com/firebase/firebase-js-sdk 使用firebase sdk，所以我不知道如何控制它

标签： reactjs firebase firebase-realtime-database

【解决方案1】：

问题在于 JavaScript 是单线程的，所以每 10 毫秒调用一次 render() 是一个糟糕的主意。最好在收到所有数据后而不是在收到每条记录后才调用一次 setState（调用渲染）。所以我设置了一个 100 毫秒的计时器来调用 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);
});

【讨论】：