useCallback

useCallback只创建一次事件句柄，每次渲染都是同一个函数
useCallback是 useMemo的一种变体
【注意：】不要滥用 useCallback

useCallback用法

let prevFunc;
function App() {
  // 每次渲染都会创建一个新的函数，性能低
  const onChange = () => {}
  // 每次渲染都是同一个函数
  const onChange = useCallback(() => {}, [])
  console.log(prevFunc === onChange)
  prevFunc = onChange
}

useCallback不需要传入 clickCount

function App(props) {
    const [count, setCount] = useState(0)
  // useMemo的值参与渲染
  const onClick = useCallback(() =>{
      setCount(clickCount => clickCount + 20)
  }, [clickCount])
}

debounce

表单实时 onChange搜索，useCallback + debounce函数防抖

import { debounce } from '@utils/func';
function App() {
  const onSearch = useCallback(debounce((value) => {
    console.log(value)
  }, 1000));
  return (
      <Form onChange={onSearch}>
     ...
    </Form>
  )
}