react 组件中函数节流的几种方式

export default ({ detail, customerId }: TProps) => {
	const [agendaVisible, setAgendaVisible] = useState(false)

	const [count, setCount] = useState(0)
	const click = count => {
		setCount(count + 1)
		console.log('-------新建联系人clicked!-------')
		console.log(`count is ${count}`)
	}
	const throFn = _.throttle(click, 2000) //如果没有缓存，每次渲染时会重新生成一个新的函数，导致节流失效
	const fnRef = useRef(_.throttle(click, 2000)) //利用useref缓存
	const fnCall = useCallback(_.throttle(click, 2000), []) //利用usecallback

	return (
		<div className={`${styles.wrap}`}>
			<Button
				id='create-agenda'
				icon='plus-circle'
				onClick={() => setAgendaVisible(true)}
				className={`overrideAntdDefaultButton ${styles.btnGap}`}>
				按钮
			</Button>
			<Button
				id='create-contact'
				icon='plus-circle'
				onClick={() => {
					throFn(count) //节流会失效
					// fnRef.current(count)  //ok
					// fnCall(count)   //ok
				}}
				className={`overrideAntdDefaultButton ${styles.btnGap}`}>
				新建
			</Button>

			{agendaVisible && (
				<AgendaForm
					close={() => setAgendaVisible(false)}
					referenceId={customerId}
					referenceName={detail?.customerName}
					referenceType={AgendaReferenceType.CUSTOMER}
				/>
			)}
		</div>
	)
}