react.js - 在 requestAnimationFrame 上渲染

Question

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

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

Answer 1

如果您使用 Browserify 或 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);