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

节流 效果

相关推荐
秋天的一阵风5 分钟前
Vue3探秘系列— 路由:vue-router的实现原理(十六-上)
前端·vue.js·面试
秋天的一阵风5 分钟前
Vue3探秘系列— 路由:vue-router的实现原理(十六-下)
前端·vue.js·面试
海底火旺25 分钟前
JavaScript中的Object方法完全指南:从基础到高级应用
前端·javascript·面试
海底火旺26 分钟前
JavaScript中的Symbol:解锁对象属性的新维度
前端·javascript·面试
天天扭码27 分钟前
一文吃透 ES6新特性——解构语法
前端·javascript·面试
Kagerou28 分钟前
组件测试
前端
数据智能老司机30 分钟前
React关键概念——理解React组件与JSX
react native·react.js·前端框架
JustHappy30 分钟前
啥是Hooks?为啥要用Hooks?Hooks该怎么用?像是Vue中的什么?React Hooks的使用姿势(上)
前端·vue.js·react.js
张可44 分钟前
历时两年半开发,Fread 项目现在决定开源,基于 Kotlin Multiplatform 和 Compose Multiplatform 实现
android·前端·kotlin
培根芝士1 小时前
electron-updater实现自动更新
javascript·electron