自定义hooks表单防抖

import React, { useState, useEffect, useRef } from 'react';
// 自定义hooks表单防抖

const useDebouse = function (value, timeout) {
  // usestate返回一个数组，state用来存放状态，setstate用来修改状态，第一次默认给state，第二次默认给setstate
  let [state, setState] = useState(value);
  const refContainer = useRef();
  // 钩子函数
  useEffect(() => {
    if (refContainer.current) {
      let someValue = '输入中....'
      setState(someValue)
    } else {
      refContainer.current = true;
    }
    // 防抖
    let timer = setTimeout(() => { setState(value) }, timeout)
    return () => clearTimeout(timer)
    // 数组监听value值，timeout挂载期，更新期执行
  }, [value, timeout])
  // 返回state
  return [state]
}

export default function App() {
  // 创建input数据
  const [input, setInput] = useState('');
  // 调用useDebouse方法进行传参
  const [output] = useDebouse(input, 500);
  // 调用handleInput会调用setInput获取value值更新到input里
  const handleInput = (e) => {
    setInput(e.target.value);
  }
  return (
    <div>
      {/* 触发onchange事件调用handleInput */}
      <input type="text" value={input} onChange={handleInput}></input>
      {output}
    </div>
  )
}