batch render

batch render

Babel + JSX

class Reder {
	constructor( value, displayFunc, renderer ) {
  	this.state = { value }
    this.renderer = renderer;
    this.displayFunc = displayFunc
  }
  
  setState( stateObj ) {
    this.state = { ...this.state, ...stateObj }
		this.renderer.push( this.render( this.state.value > 5 ? 5000 : 0 ) );
  }
  
  render( time=0, interupt=false, blocking=false ) {
  	return [
    	() => this.displayFunc( this.state.value ),
      time,      
    ];    
  }
}

class Blocking extends Reder {
	constructor( value, displayFunc, renderer ) {
  	super( value, displayFunc, renderer )
  }
  setState( stateObj ) {
    this.state = { ...this.state, ...stateObj }
		this.renderer.push( this.render( ( this.state.value > 5 ? 5000 : 0 ), false, true ) );
  }
}

class Interupt extends Reder {
	constructor( value, displayFunc, renderer ) {
  	super( value, displayFunc, renderer )
  }
  setState( stateObj ) {
    this.state = { ...this.state, ...stateObj }
		this.renderer.push( this.render( ( this.state.value > 5 ? 5000 : 0 ), true, false ) );
  }
}

class Renderer {
	constructor() {
  	this.renderStack = [];
    this.stackTimer = null;
  }
  push( [ renderFunc, animationTime, interupt=false, blocking=false ] ) {
		if ( interupt ) {
    	console.log( renderFunc() )
    } else {
    	this.renderStack.push( [renderFunc, animationTime, blocking] )
      if ( !this.stackTimer ) this.render_next();
    }
  }
  render_next() {
		if ( this.renderStack.length > 0 ) {
    	let blockingRender = this.renderStack.shift();
      let renderBatch = blockingRender[ 0 ]();
      while( blockingRender[ 1 ] === 0 && !blockingRender[ 2 ] ) {
	      blockingRender = this.renderStack.shift();
        renderBatch += ' ' + blockingRender[ 0 ]();
      }
  	  console.log( renderBatch );
      this.stackTimer = null;
	    this.stackTimer = setTimeout( () => this.render_next(), blockingRender[ 1 ] );
    }
  }
}

const renderer = new Renderer()

const a = new Reder( 1, value => `${value}`, renderer )
const b =...