类似usemouse这类的hook如何防抖节流

Question

ahooks官方的demo

import { useMouse } from 'ahooks';
import React from 'react';

export default () => {
  const mouse = useMouse();

  return (
    <div>
    {console.log('render')}
    {/*👆*/}
      <p>
        Client - x: {mouse.clientX}, y: {mouse.clientY}
      </p>
      <p>
        Page - x: {mouse.pageX}, y: {mouse.pageY}
      </p>
      <p>
        Screen - x: {mouse.screenX}, y: {mouse.screenY}
      </p>
    </div>
  );
};

我希望获得的Mouse能够做一些性能优化,减少render,比如0.5秒变化一次值,然后触发渲染

初学者,还请多多包涵, 非常感谢

Answer 1

自己防抖处理下咯

或者直接用ahook提供的

  const _mouse = useMouse();
  const mouse = useThrottle(_mouse, {
    wait: 500
  })