React- 使用节流

Posted 2022-12-05 WHOVENLY

今日在工作中遇到项目卡顿，导致按钮多次点击后多次提交的问题，于是想着为按钮加个节流，但是在使用时发现和在js中使用不太一样，摸索出来其使用方法，这里简单记录下，等后续有时间再去深入了解其原理。

1.使用自己写的节流函数

import React,  useState  from "react";
import  Button  from "antd";
export default function index() 
  const [pre, setPre] = useState(0);

  // 节流函数
  const throttle =
    (fn, delay) =>
    (...rest) => 
      const current = Date.now();
      if (current - pre > delay) 
        fn(rest);
        setPre(current);
      
    ;

  // 对按钮点击事件包装一层节流
  const click_handle = () => 
    throttle(click, 2000)();
  ;

  // 点击事件真正的逻辑写这里
  const click = () => 
    console.log("点击");
  ;
  return (
    <div>
      <Button onClick=click_handle>点击</Button>
    </div>
  );

2.使用lodash库中的方法throttle

在函数组件中使用

import React from "react";
import  Button  from "antd";
import throttle from "lodash/throttle"; //引入lodash中的节流函数
export default function index() 
  // 对按钮点击事件包装一层节流
  const click_handle = throttle(() => click(), 2000);
  // 点击事件真正的逻辑写这里
  const click = () => 
    console.log("点击");
  ;
  return (
    <div>
      <Button onClick=click_handle>点击</Button>
    </div>
  );

在类组件中使用

import React,  Component  from "react";
import throttle from "lodash/throttle";
import  Button  from "antd";
export default class index extends Component 
  // 对按钮点击事件包装一层节流
  click_handle = throttle(() => this.click(), 2000);

  // 点击事件真正的逻辑写这里
  click = () => 
    console.log("点击");
  ;
  render() 
    return (
      <div>
        <Button onClick=this.click_handle>点击</Button>
      </div>
    );
  

在类组件中还有一种使用方式

import React,  Component  from "react";
import throttle from "lodash/throttle";
import  Button  from "antd";
export default class index extends Component 
  constructor(props) 
    super(props);
    this.click_handle = throttle(this.click_handle, 2000);
  
  // 点击事件真正的逻辑写这里
  click_handle = () => 
    console.log("点击");
  ;
  render() 
    return (
      <div>
        <Button onClick=this.click_handle>点击</Button>
      </div>
    );