javascript - 为什么 ReactJS 的性能不如原始 JS 那样简单、愚蠢的概念证明？

Question

几年前，我听说过一个不错的 404 页面和 implemented a copy .

在使用 ReactJS 时，the same idea旨在实现，但它的 Action 缓慢且不稳定，过了一会儿，Chrome 给它一个“无响应的脚本”警告，精确指向第 1226 行，“varposition = index %repeated_tokens.length;”，其中有一些连续调用之间有数百毫秒的延迟。该脚本始终超越无响应的页面，使计算机崩溃。

显然，它们不是相同的实现，尽管 ReactJS 版本是从“我还没有使用 jQuery”版本派生的。但除此之外，为什么它会陷入困境？我是否做了一个很深的闭包堆栈？为什么是the ReactJS port比 the bare JavaScript original 慢？

在这两种情况下，工作都是由小算术驱动的，代码或其正在执行的操作没有什么特别有趣的地方。

--更新--

我发现我得到了一张反对票和三张接近票...

这似乎得到了一些人的回应，他们(a)说了一些明智的话，(b)与皮特·亨特和其他人所说的相矛盾。

Hunt 和 Facebook 的 ReactJS 视频声称，合成 DOM 速度快如闪电，足以在非 JIT iPhone 上每秒拉取 60 帧。他们留下了一个优化钩子(Hook)，说“在快速比较中忽略 DOM 的这一部分”，我在其他地方用它来放弃对非 ReactJS 小部件的管辖权。

@EdBallot 的建议是“创建和渲染元素以及执行单个 document.getElementById 的工作量极大(并且不必要)。现在我正在考虑最后一点；DOM 操作很慢。但是这里的回应很难与 Facebook 一直以来关于高性能 ReactJS 的说法相一致。我们将对(理论上)丢弃 DOM 并创建一个新的 DOM 采取更多的态度，这速度快如闪电，因为它是在内存中完成的，无需与真实的 DOM 交互。

在很多情况下，我想要一些更外科手术式的东西，并且可以尝试改变尽可能小的区域，但是我见过的 ReactJS 视频的文字和精神完全符合“压缩你想要的一切；我们将制作更多”的精神。 ”

开始尝试建议的编辑，看看它们会做什么......

Answer 1

我没有查看所有代码，但对于初学者来说，这是相当低效的

var update = function() {
  React.render(React.createElement(Pragmatometer, null),
    document.getElementById('main'));
  for(var instance in CKEDITOR.instances) {
    CKEDITOR.instances[instance].updateElement();
  }
  save('Scratchpad', document.getElementById('scratchpad').value);
};
var update_interval = setInterval(update, 100);

它正在做大量(且不必要)的工作，并且每 100 毫秒完成一次。除此之外，它还调用:

• React.createElement
• React.render
• document.getElementById

可能随着创建和释放的 JS 对象数量的增加，您的 update 函数加上垃圾回收将花费超过 100 毫秒的时间，从而有效地使计算机崩溃并降低。

至少，我建议在间隔回调之外尽可能多地进行缓存。也不需要多次调用 React.render 。一旦将其渲染到 dom 中，请使用 setProps 或 forceUpdate 使其渲染更改。

以下是我的意思的示例:

var mainComponent = React.createElement(Pragmatometer, null);
React.render(mainComponent,
  document.getElementById('main'));

var update = function() {
  mainComponent.forceUpdate();
  for(var instance in CKEDITOR.instances) {
    CKEDITOR.instances[instance].updateElement();
  }
  save('Scratchpad', document.getElementById('scratchpad').value);
};
var update_interval = setInterval(update, 100);

除此之外，我还建议将 setInterval 代码移动到渲染该内容的任何 React 组件中(Scratchpad 组件？)。

最后一点评论:使用 setInterval 的缺点之一是它不会等待回调函数完成后再排队下一个回调。另一种方法是使用 setTimeout 并通过回调设置下一个 setTimeout，如下所示

var update = function() {
  // do some stuff

  // update is done to setup the next timeout
  setTimeout(update, 100);
};
setTimeout(update, 100);