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>
		)
	}
}

如果事件触发是高频但是有停顿时，可以选择debounce；在事件连续不断高频触发时，只能选择 throttle ，因为 debounce 可能会导致一段时间内动作只被执行一次，界面出现闪烁。