react防抖节流

节流----throttle

方法一

import throttle from 'lodash/throttle';
export default class Search extends Component {
    constructor(props) {
        super(props)
        this.handleClick = throttle(this.handleClick , 1000);
    }
    handleClick = (e) => {
        ...
    }
}
    render() {
        return (
        <div onClick={this.handleClick}><div>
        )
    }
}

方法二

import Throttle from 'lodash-decorators/throttle';
export default class Search extends Component {
    constructor(props) {
        super(props)
        this.handleClick = this.handleClick .bind(this);
    }
    @Throttle(300)
    handleClick = (e) => {
        ...
    }
}
    render() {
        return (
        <div onClick={this.handleClick}><div>
        )
    }
}

防抖----debounce

方法一

import debouncefrom 'lodash/debounce';
export default class Search extends Component {
    constructor(props) {
        super(props)
        this.handleClick = debounce(this.handleClick , 1000);
    }
    handleClick = (e) => {
        ...
    }
}
    render() {
        return (
        <div onClick={this.handleClick}><div>
        )
    }
}

方法二

import Throttle from 'lodash-decorators/debounce';
export default class Search extends Component {
    constructor(props) {
        super(props)
        this.handleClick = this.handleClick .bind(this);
    }
    @debounce(300)
    handleClick = (e) => {
        ...
    }
}
    render() {
        return (
        <div onClick={this.handleClick}><div>
        )
    }
}