React防抖

最新推荐文章于 2025-02-28 00:15:29 发布

Rick_Jci

最新推荐文章于 2025-02-28 00:15:29 发布

阅读量928

点赞数

分类专栏： React框架文章标签： react.js javascript 前端

本文链接：https://blog.youkuaiyun.com/qq_37905131/article/details/125473407

版权

React框架专栏收录该内容

4 篇文章

订阅专栏

该博客展示了在React的类组件和函数组件中如何实现防抖(debounce)技术，以提高性能。在类组件中，作者分别演示了自定义防抖函数和使用lodash库的防抖函数来更新状态。而在函数组件中，利用`useCallback`和`useEffect`配合lodash的防抖函数来实现相同功能。通过防抖，可以限制函数的调用频率，避免在高频事件（如点击）中频繁触发状态更新。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

class类组件防抖的使用

import React, { Component } from 'react'
import {debounce} from 'lodash'

import { Button } from 'antd'

export default class TestClass extends Component {
  state = {
    value:0
  }

  // 自己的防抖
  dbclick = ()=> {
    if(this.time) clearTimeout(this.time)
    this.time = setTimeout(this.handlerClick,500)
  }
  handlerClick = ()=>{
    const newvalue= this.state.value+1
    this.setState({value:newvalue})
    clearTimeout(this.time)
  }

  // lodash 的防抖
  debounceClick = ()=>{
    if(!this.mydebounce){
      this.mydebounce = debounce(this.add,500)
    }
    this.mydebounce()
  }
  add = ()=>{
    const newvalue= this.state.value+1
    this.setState({value:newvalue})
  }

  render() {
    return (
      <div>
          {this.state.value}
          <Button type="primary" onClick={this.dbclick}>原生 click</Button>
          <br/>
          <Button type="primary" onClick={this.debounceClick}>lodash click</Button>
      </div>
    )
  }
}

函数组件防抖的使用

import React, { useCallback, useEffect, useState } from "react";
import { debounce } from "lodash";

export default function App() {
  const [value, setValue] = useState(0);
  const dbclick = ()=>{
    const click =debounce(() => setValue(value + 1), 500)
    click()
  }
   
  return <button onClick={()=>{
    dbclick()
  }}>{value}</button>;
}