react频繁使用的js(input防抖请求、节流)

目录

react频繁使用的js(input防抖请求)

input的防抖请求

js 复制代码
import React, { useState, useEffect, useCallback } from "react";
import { Input } from "antd";
import SearchDeptID from "styled-components";
import { debounce } from "lodash";
export default function SearchDept(props) {
  const [keyword, setKeyword] = useState("");

  // input使用防抖
  const keywordDebounce = useCallback(debounce((val)=>{
    console.log('val',val);
  }, 300),[])
  const inputChange = (event) => {
    const value = event.target.value;
    setKeyword(value);
    keywordDebounce(value);
  }

  return (
    <SearchDeptWrap>
      <Input
        placeholder="请输入"
        className="ipt"
        value={keyword}
        onChange={inputChange}
      />
    </SearchDeptWrap>
  );
}
const SearchDeptWrap = SearchDeptID.div`
`;

节流 提交的节流或者点击按钮等节流

节流 code

js 复制代码
import { throttle } from 'lodash';
import React, { useCallback, useState } from 'react';

export default function App(props) {
  const [count, setCount] = useState(0);

  const throttleFunc = useCallback(
    throttle(() => {
      console.log('throttleFunc');
      setCount((prevCount) => prevCount + 1);
    }, 1000),
    []
  );

  const addCount = () => {
    console.log('addCount');
    throttleFunc();
  };

  return (
    <div className='content'>
      count-{count}
      <button onClick={addCount}>addCount</button>
    </div>
  );
}

节流 效果

相关推荐
mCell11 小时前
GSAP ScrollTrigger 详解
前端·javascript·动效
gnip11 小时前
Node.js 子进程:child_process
前端·javascript
excel14 小时前
为什么在 Three.js 中平面能产生“起伏效果”?
前端
excel15 小时前
Node.js 断言与测试框架示例对比
前端
天蓝色的鱼鱼16 小时前
前端开发者的组件设计之痛:为什么我的组件总是难以维护?
前端·react.js
codingandsleeping16 小时前
使用orval自动拉取swagger文档并生成ts接口
前端·javascript
石金龙17 小时前
[译] Composition in CSS
前端·css
白水清风17 小时前
微前端学习记录(qiankun、wujie、micro-app)
前端·javascript·前端工程化
Ticnix18 小时前
函数封装实现Echarts多表渲染/叠加渲染
前端·echarts
用户221520442780018 小时前
new、原型和原型链浅析
前端·javascript