React achieve stabilization input and throttle input box

1. Why use image stabilization and throttle
for frequent trigger events such as keydown keyup frequent event when clicking several times when a trigger event page Caton affect the performance of

2. Shake Reduction function (debounce): Section function is performed only once during the interval flow (throttle): execution interval event

3. use the scene
function Image stabilization: Search box and other 
functions throttling: mouse click events continue

4. The purpose

Enhance performance and improve user experience

5. To achieve stabilization and the throttle react with

React Import, {from} the Component "REACT"; 
class UnDebounce the extends the Component { 
  constructor (The props) { 
    Super (The props); 
    this.state = { 
      the timerId: null, // integer number of the timer to cancel the timer 
    } 
  } 

  // mimic ajax request 
  ajax = (Content) => { 
    the console.log ( 'ajax:' + Content) 
  } 

  Debounce = (Fn, Delay = 3000) => { 
    // execution interval throttle 
    return (... rest ) => {// arrow function with no arguments ... rest so instead of 
      the let args = REST; 
      IF (this.state.timerId) the clearTimeout (this.state.timerId); // use the this.timerId not directly define the timerId = null var; 
      this.state.timerId = the setTimeout (() => { 
        fn.apply (the this, args)  
      }, Delay)
    }

  } 

  Throttle = (Fn, Delay = 3000) => {// 
    intervals during // throttle 
    the let = canrun to true; 
    return (REST ...) => { 
      IF return (canrun!); 
      Canrun = to false; 
      the setTimeout ( () => { 
        fn.apply (the this, REST); 
        canrun = to true; 
      }, Delay) 

    } 
  } 

  onUndebounceKeyUpClick = (E) => {// long as the key presses occur ajax request appears generally wasted resources the complete character when the input data does not request 
    this.ajax (e.target.value) 
  } 


  onDebounceKeyUpClick = (E) => {// debounce added after sending request after frequent input 
    let debounceAjax = this.debounce ( this.ajax, 3000) 
    debounceAjax (e.target.value) 
  }

  onThrottleKeyUpClick = (e) => { // ajax we will follow the set time, is performed once every 1s 
    the let throttleAjax = this.throttle (this.ajax, 3000); 
    throttleAjax (e.target.value) 
  } 
  the render () { 
    return ( 
      <div> 
        normal input: <input onKeyUp = {this.onUndebounceKeyUpClick } /> 
        Stabilize the input: <input onKeyUp = {this.onDebounceKeyUpClick } /> 
        throttling input: <input onKeyUp = {this.onThrottleKeyUpClick } /> 
      </ div> 
    ); 
  } 
} 

Export default UnDebounce;