React store调度限制

Question

所以我的问题可能是一个常见的问题，但我还没有看到有关如何使用挂钩/功能组件的解释。

我有一个受控输入，只是附加了一个简单的状态。当此输入更改时，它具有一个处理程序，该处理程序首先更新所述状态，然后将其分派到商店。我想做的是立即更新状态（以便用户可以在键入时没有太多滞后的情况下进行输入），然后将调度限制为每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 }));
        });
    };

在这种情况下，节气门功能永远不会触发。

Answer 1

that函数。现在的操作方式是，只需要一遍又一遍地重新制作受限制的函数。

请考虑以下示例：

import {throttle} from "https://unpkg.com/[email protected]/dist/index.esm.js";

function sayWords(word) {
  console.log(word);
}

const throttledSayWords = throttle(1000, sayWords);

setInterval(() => {
  throttledSayWords("Hello");
}, 100);

Answer 2

that函数：

请考虑以下示例：

import {throttle} from "https://unpkg.com/[email protected]/dist/index.esm.js";

function sayWords(word) {
  console.log(word);
}

const throttledSayWords = throttle(1000, sayWords);

setInterval(() => {
  throttledSayWords("Hello");
}, 100);