React存储分派节流
React存储分派节流
提问于 2020-01-29 03:07:11
所以我的问题可能是一个常见的问题，但我还没有看到关于如何使用钩子/功能组件来做到这一点的解释。
我有一个受控输入，它只附加了一个简单的状态。当这个输入改变时，它有一个处理程序，首先更新所述状态，然后第二次将状态分派到存储。我尝试做的是立即更新状态(以便用户可以在键入过程中没有太多延迟)，然后将分派限制为每300毫秒才发生一次，例如，因为分派的开销很大，并且是导致键入延迟的原因。
因此，它是这样的：
const handleChange = (event) => {
const { value } = event.target;
setName(value);
dispatch(actions.editCheckpointPeriod({ id, name }));
};
.
.
.
<S.Input value={name} onChange={handleChange} />但是当我这样做的时候，https://www.npmjs.com/package/throttle-debounce包并没有像我期望的那样工作：
const handleChange = (event) => {
const { value } = event.target;
setName(value);
throttle(300, false, () => {
dispatch(actions.nameAction({ id, value }));
});
};在这种情况下，节流函数永远不会触发。
回答 2
Stack Overflow用户
发布于 2020-01-29 03:20:50
我不认为在redux中保持表单状态是一个好主意，就像react文档中提到的那样。formik是一个非常棒的管理表单状态的库。无论如何，如果你在本地保存状态，那么就不会有任何延迟，因为react处理重新渲染和状态更新非常非常快。
Stack Overflow用户
发布于 2020-01-29 03:21:45
这是不正确的签名。debounce返回一个函数供您调用。如果在更改处理程序中定义该函数，则该函数将丢失被反复调用的上下文。相反，将dispatch包装在去抖动或节流中，然后在没有处理程序情况下调用函数。按照你现在的方式，你只需要一遍又一遍地重写这个被限制的函数。
考虑以下示例：
import {throttle} from "https://unpkg.com/throttle-debounce@2.1.0/dist/index.esm.js";
function sayWords(word) {
console.log(word);
}
const throttledSayWords = throttle(1000, sayWords);
setInterval(() => {
throttledSayWords("Hello");
}, 100);
如果你运行这个例子，它会尝试每100毫秒打一次招呼，但实际上每秒只会被调用一次。
所以对于你来说，它看起来像这样：
import {throttle} from "https://unpkg.com/throttle-debounce@2.1.0/dist/index.esm.js";
const throttledDebounce = throttle(300, false, dispatch);
const handleChange = (event) => {
const {value} = event.target;
setName(value);
throttledDebounce({
id,
value
});
};
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/59955463
复制相关文章
相似问题
腾讯云开发者
