import * as React from 'react';
import useCallback from 'react-use-callback';
 
export default () => {
  const isFirst = React.useRef(true);
  const [count, setCount] = React.useState(0);
 
  const onClick = useCallback(() => {
    setCount(count + 1);
  });
 
  const onClick1 = React.useCallback(() => {
    setCount(count + 1);
  }, []);
 
  const onClick2 = React.useCallback(() => {
    setCount(count + 1);
  }, [count]);
 
  React.useMemo(() => {
    if (isFirst) {
      return;
    }
    console.log('react-use-callback 引用变化');
  }, [onClick]);
 
  React.useMemo(() => {
    if (isFirst) {
      return;
    }
    console.log('react 原生 useCallback 传入依赖， 引用变化');
  }, [onClick2]);
 
  return (
    <div>
      <span>{count}</>
      <button onClick={onClick}>react-use-callback</button>
      <button onClick={onClick1}>react 原生 useCallback</button>
      <button onClick={onClick2}>react 原生 useCallback 传入依赖</button>
    </div>
  );
};