react防抖节流

最新推荐文章于 2024-07-25 17:14:51 发布

shiningchen322

最新推荐文章于 2024-07-25 17:14:51 发布

阅读量345

点赞数

分类专栏： React 文章标签： react

本文链接：https://blog.csdn.net/shiningchen322/article/details/110180591

版权

本文介绍了如何在React应用中利用lodash库来实现防抖(debounce)和节流(throttle)技术，以优化性能。通过执行npm install --save lodash安装lodash库后，开发者可以轻松地在组件方法中应用这些优化策略。

摘要由CSDN通过智能技术生成

import React from 'react'
import {  debounce, throttle } from 'lodash' // 防抖、节流

class About2 extends React.Component {

  constructor(props) {
    super(props)
    this.handleChange = this.handleChange.bind(this)
    this.emitChangeDebounced = debounce(this.emitChange, 250) // 防抖：比如页面一直滚动，滚动完，250毫秒后做一件事情，而不是滚动中不断做某件事
    this.handleClickThrottled = throttle(this.handleClick, 1000) // 节流：固定时间1秒内，一件事情只做一次
  }

  componentWillUnmount() {
    this.emitChangeDebounced.cancel() // 取消防抖
    this.handleClickThrottled.cancel() // 取消节流
  }

  // 防抖处理
  handleChange(e) {
    console.log('---e---', e)
    this.emitChangeDebounced(e.target.value)
  }
  
  emitChange(value) {
    console.log('---value----防抖后要做的事-', value)
  }

  // 节流处理
  handleClick() {
    console.log('---节流事件--')
  }

  render() {
    console.log('---About2----this.props----', this.props)

    return (
      <div s