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

我也不认为在Reactux中保持表单状态也是一个好主意。 formik是一个很好的库，用于管理表单状态。无论如何，如果您将状态保持在本地，则不会有任何滞后，因为react可以非常快速地处理重新渲染和状态更新。

Answer 2

那是不正确的签名。 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
  });
};

反应商店调度节流

2 个答案: