反应性能钩

跳出并抑制你的功能 以获得性能提升!

• 更好的类型

特征

• :火箭:简单、快和轻
• : 构件: 调制和调制
• * 生命周期事件处理

安装

npm install --save @better-typed/react-performance-hooks

或者说

yarn add @better-typed/react-performance-hooks

调试

此钩子允许调试指定的函数 .

import React from "react";
import { useDebounce } from "@better-typed/react-performance-hooks";

const MyComponent: React.FC = ({ delay }) => {
  const {debounce, reset, active} = useDebounce(delay)

  // Standard usage
  const onTyping = () => {
    debounce(() => {
      // debounced logic
    })
  }

  // Dynamic delay value
  const onTypingDynamic = (value: string, customDelay: number) => {
    debounce(() => {
      // debounced logic
    }, customDelay)
  }

  return (
    // ...
  )
}

使用色调

此钩子允许调试指定的函数 .

import React from "react";
import { useThrottle } from "@better-typed/react-performance-hooks";

const MyComponent: React.FC = ({ delay }) => {
  const {throttle, reset, active} = useThrottle(delay)

  // Standard usage
  const onScroll = () => {
    throttle(() => {
      // throttle logic
    })
  }

  // Dynamic delay value
  const onScrollDynamic = (value: string, customDelay: number) => {
    throttle(() => {
      // throttle logic
    }, customDelay)
  }

  return (
    // ...
  )
}