React 实现input输入框的防抖和节流

React 实现input输入框的防抖和节流

1.为什么使用防抖和节流
对于频繁触发的事件 比如keydown keyup事件 当频繁点击时候 会多次触发事件 页面出现卡顿 影响性能

2.函数防抖（debounce）：间隔时间内只执行一次 函数节流（throttle）：间隔时间内执行

3.使用场景
函数防抖：搜索框等
函数节流：鼠标不断点击事件等

4.目的

提升性能 提高用户体验

5.用react实现防抖和节流

刚好react脚手架是集成了lodash的

import throttle from 'lodash/throttle';

export default class Search extends Component {
    constructor(props) {
      super(props)
      this.handleSearch = throttle(this.handleSearch, 1000);//这里的间隔就是每xx时间内只执行一次该函数
    }
    handleSubmit = (e) => {
        e.preventDefault();
        this.handleSearch();
    }
    handleSearch = () => {
    ...
    }
    render() {
        return (
            <form onSubmit={this.handleSubmit}><form>
        )
    }
}