react.js - 在requestAnimationFrame上呈现

Kos*_*ika 8 javascript render requestanimationframe reactjs react-jsx

我想在我的应用程序中试验一些React组件的性能.我知道ClojureScript的Om框架(https://github.com/swannodette/om)使用了一些优化技术,比如使用immutables来实现shouldComponentUpdate()和渲染requestAnimationFrame更改.

有没有可以引入基于渲染的简单JavaScript mixin requestAnimationFrame

Mic*_*ley 8

如果您使用Browserifywebpack之类的东西从CommonJS环境构建React,或者生成React的自定义构建,这是可能的.也就是说,如果您只使用可下载的预构建的React ,则无法执行此操作.

查看Pete Hunt的反应 - raf-batching项目以获得更全面的解决方案(包括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);
Run Code Online (Sandbox Code Playgroud)

  • 请注意,您可能需要处理一些(可解决的)极端情况:https://github.com/petehunt/react-raf-batching/issues/8 (3认同)