react 输入框的防抖

第一种方法：利用useEffect的卸载函数来清除timer。每次执行useEffect前会把上一次的return的函数执行了，再执行useEffect里面的代码；

import react, {useState, useCallback} from 'react';
import { useRef } from 'react';
import { useEffect } from 'react';

export default ()=>{

    const [value, setValue] = useState('000');
    const changeValue=(e)=>{    
       setValue(e.target.value);
    }

   
    const requestData= (value)=>{
          console.log('请求数据', value)
        //  let data =   fetch('http://localhost:3000/api/goods', {method:'POST', body: JSON.stringify({'name': value})}).then(res=>res.json())
    }

     useEffect(()=>{
          let timer = setTimeout(()=>{
             requestData()
          }, 1000)
          return ()=>{
             clearTimeout(timer)
         }
     }, [value])
    
    return <div>
        <input  type="text"   onChange={changeValue} value = {value} />
    </div>
}

第二种方式：使用useCallback来缓存一个防抖函数。

import react, {useState, useCallback} from 'react';
import { useRef } from 'react';
import { useEffect } from 'react';

function debounce(fn, delay){
   let timer = null;
   return function (){
    let arg = arguments
    if(timer){
       clearTimeout(timer)
    }
    timer = setTimeout(()=>{
         fn.apply(this, arg)
    }, delay)
   }
}

export default ()=>{

    const [value, setValue] = useState('000');
    const changeValue=(e)=>{
        
       setValue(e.target.value);
       debouncedSave(e.target.value);
    }

   
    
    const requestData= (value)=>{
          console.log('请求数据', value)
        //  let data =   fetch('http://localhost:3000/api/goods', {method:'POST', body: JSON.stringify({'name': value})}).then(res=>res.json())
    }

     	// 防抖函数开始
	const debouncedSave = useCallback(   
        debounce(requestData, 1000)
        ,[]// 仅在初次渲染时创建一个防抖函数
	);
    
    return <div>
        <input  type="text"   onChange={changeValue} value = {value} />
    </div>
}

第三种方式：使用useRef来存放一个防抖函数。

function debounce(fn, delay){
    let timer = null;
    return function(){
        let arg = arguments;
        if(timer){
            clearTimeout(timer)
        }
        timer = setTimeout(()=>{
              fn.apply(this,arg)
        },delay )
    }
}

import reac, {useState, useEffect, useCallback} from 'react';
import { useRef } from 'react';

export default ()=>{
    const [value, setValue] = useState('');
    const fetchData=(value)=>{
        console.log('请求数据',value)
    }
    const myDebounce = useRef(debounce(fetchData, 1000)).current
    const changeValue=(e) => {
        setValue(e.target.value);
        myDebounce(e.target.value)
    };
    
    return <div>
        <input  type="text"  onChange={changeValue} />
    </div>
}