React使用 lodash-es 中的throttle方法失效

React使用 lodash-es 中的throttle方法失效

下面代码用了throttle方法,但是并没有实现1500内执行一次的效果,主要原因是useState的setValue()方法
该方法更新了state,导致了组件重新渲染,并且重新生成了函数,所以1500毫秒又被重置了

// ****** 错误 ******
const onAction = throttle(async () => {
  const params = {};
  const res = await API.loanSubmitSubmitApi(params);
  if (res.code === 200) {
    setValue('XXXX')
  }
}, 1500);

// ****** 正确 ******
// 这里为什么不用useCallback,具体原因没细究,我看到相关issue的回答就是改成useMemo.
// 如果需要用到load接口中的数据并且数据存在state中,这里的依赖项就应该是[loadData],不添加依赖项的话,会获取不到load的接口数据
const onAction = useMemo(
  () =>
    throttle(async () => {
      const params = {};
      const res = await API.xxxxxApi(params);
      if (res.code === 200) {
        setValue("XXXX");
      }
    }, 1500),
  []
);
### 如何在 React 项目中集成和使用 lodash-es 为了优化性能并减少打包体积,在现代 JavaScript 开发环境中推荐按需加载 Lodash 的功能模块而不是导入整个库。对于 React 项目而言,可以采用 `lodash-es` 这一版本来实现更高效的树摇动(tree-shaking),从而只包含实际使用的部分。 #### 安装依赖包 通过 npm 或 yarn 将 `lodash-es` 添加到项目的依赖项列表: ```bash npm install lodash-es ``` 或者如果偏好使用 Yarn: ```bash yarn add lodash-es ``` #### 导入特定方法而非全部工具集 相比于传统的整体导入方式,建议仅导入所需的单个函数以提高效率。例如要使用 `get()` 函数可以从对象深层获取属性值而不必担心路径不存在的情况,则应这样写代码: ```javascript // 不推荐的做法 - 整体导入会增加不必要的开销 import _ from 'lodash-es'; const value = _.get(object, 'path.to.deep.property', defaultValue); // 推荐做法 - 只导入需要的部分 import get from 'lodash-es/get'; const value = get(object, 'path.to.deep.property', defaultValue); ``` 这种策略有助于减小程序的整体大小,并使得构建过程中的静态分析更加容易识别未被引用的代码片段以便移除它们[^2]。 #### 实际应用场景举例 假设有一个场景是在组件内处理表单验证逻辑时需要用到 Lodash 中的某些辅助函数。下面是一个简单的例子展示了如何在一个 React 组件里安全地访问嵌套数据结构而不用担心潜在的 null/undefined 错误: ```jsx import React, { useState } from 'react'; import get from 'lodash-es/get'; // 按需引入具体的方法 function UserProfile({ user }) { const [email, setEmail] = useState( get(user, ['profile', 'contactInfo', 'email'], '') ); return ( <div> <label>Email:</label> <input type="text" value={email} onChange={(e) => setEmail(e.target.value)} /> </div> ); } export default UserProfile; ``` 在这个案例中,即使传入的对象缺少预期的层次结构也不会抛出异常,而是返回默认提供的空字符串作为初始状态。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值