react.js - 在 requestAnimationFrame 上渲染

Question

我想在我的应用程序中试验一些 React 组件的性能。我知道 ClojureScript 的 Om 框架 (https://github.com/swannodette/om) 使用了一些优化技术，例如使用不可变实现 shouldComponentUpdate() 并在 requestAnimationFrame 更改时呈现。

是否有简单的 JavaScript mixin 可以引入基于 requestAnimationFrame 的渲染？

Answer 1

如果您使用类似 Browserify or webpack 的东西从 CommonJS 环境构建 React，或者以其他方式生成 React 的自定义构建，则这是可能的。也就是说，如果您只使用可下载的预构建 React，您不能这样做。

查看 Pete Hunt 的 react-raf-batching project 以获得更全面的解决方案（包括 rAF polyfills），但这里有一个最简单的例子来实现它：

var ReactUpdates = require("react/lib/ReactUpdates");

var rafBatchingStrategy = {
  isBatchingUpdates: true,
  batchedUpdates: function(callback, param) {
    callback(param);
  }
};

var tick = function() {
  ReactUpdates.flushBatchedUpdates();
  requestAnimationFrame(tick);
};

requestAnimationFrame(tick);

ReactUpdates.injection.injectBatchingStrategy(rafBatchingStrategy);

react.js - 在 requestAnimationFrame 上渲染

react.js - Render on requestAnimationFrame

javascript

render

reactjs

requestanimationframe

react-jsx