react.js - Render auf AnfrageAnimationFrame

Question

Ich möchte mit der Leistung einiger React-Komponenten in meiner App experimentieren. Ich weiß, dass ClojureScript Om Framework (https://github.com/swannodette/om) einige Optimierungstechniken wie die Verwendung von immutables mit Implementierung shouldComponentUpdate() und Rendering auf requestAnimationFrame Änderung verwendet.

Gibt es einen einfachen JavaScript-Mix, der das Rendering basierend auf requestAnimationFrame einleiten könnte?

Answer 1

Dies ist möglich, wenn Sie etwas wie Browserify oder webpack verwenden, um React aus einer CommonJS-Umgebung zu erstellen oder anderweitig eine benutzerdefinierte Build von React zu erstellen. Das heißt, Sie können nicht dies tun, wenn Sie nur die herunterladbare, vorgefertigte React verwenden.

Check out Pete Hunt react-raf-batching project für eine umfassendere Lösung (einschließlich rAF polyfills), aber hier ist ein minimales Beispiel diese Funktion zu erhalten:

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);