2019：尝试钩子 + 承诺去抖动
这是我如何解决这个问题的最新版本。我会使用：
这是一些初始接线，但您是自己组合原始块，您可以制作自己的自定义钩子，这样您只需要这样做一次。
// Generic reusable hook
const useDebouncedSearch = (searchFunction) => {
// Handle the input text state
const [inputText, setInputText] = useState('');
// Debounce the original search async function
const debouncedSearchFunction = useConstant(() =>
AwesomeDebouncePromise(searchFunction, 300)
);
// The async callback is run each time the text changes,
// but as the search function is debounced, it does not
// fire a new request on each keystroke
const searchResults = useAsync(
async () => {
if (inputText.length === 0) {
return [];
} else {
return debouncedSearchFunction(inputText);
}
},
[debouncedSearchFunction, inputText]
);
// Return everything needed for the hook consumer
return {
inputText,
setInputText,
searchResults,
};
};
然后你就可以使用你的钩子了：
const useSearchStarwarsHero = () => useDebouncedSearch(text => searchStarwarsHeroAsync(text))
const SearchStarwarsHeroExample = () => {
const { inputText, setInputText, searchResults } = useSearchStarwarsHero();
return (
<div>
<input value={inputText} onChange={e => setInputText(e.target.value)} />
<div>
{searchResults.loading && <div>...</div>}
{searchResults.error && <div>Error: {search.error.message}</div>}
{searchResults.result && (
<div>
<div>Results: {search.result.length}</div>
<ul>
{searchResults.result.map(hero => (
<li key={hero.name}>{hero.name}</li>
))}
</ul>
</div>
)}
</div>
</div>
);
};
您会发现此示例运行here，您应该阅读react-async-hook 文档了解更多详细信息。
2018: 尝试去抖动
我们经常希望对 API 调用进行去抖动处理，以避免无用的请求淹没后端。
在 2018 年，使用回调（Lodash/Underscore）对我来说感觉很糟糕并且容易出错。由于 API 调用以任意顺序解析，很容易遇到样板和并发问题。
我创建了一个带有 React 的小库来解决您的烦恼：awesome-debounce-promise。
这应该不会比这更复杂：
const searchAPI = text => fetch('/search?text=' + encodeURIComponent(text));
const searchAPIDebounced = AwesomeDebouncePromise(searchAPI, 500);
class SearchInputAndResults extends React.Component {
state = {
text: '',
results: null,
};
handleTextChange = async text => {
this.setState({ text, results: null });
const result = await searchAPIDebounced(text);
this.setState({ result });
};
}
去抖动功能确保：
- API 调用将被消除抖动
- 去抖函数总是返回一个承诺
- 只有最后一次调用返回的 Promise 才会解决
- 每个 API 调用都会发生一个
this.setState({ result });
最终，如果您的组件卸载，您可能会添加另一个技巧：
componentWillUnmount() {
this.setState = () => {};
}
请注意，Observables (RxJS) 也非常适合去抖动输入，但它是一种更强大的抽象，可能更难正确学习/使用。
这里的重要部分是为每个组件实例创建一个去抖动（或节流）函数。您不希望每次都重新创建去抖（或限制）函数，也不希望多个实例共享相同的去抖函数。
我没有在此答案中定义去抖功能，因为它并不真正相关，但此答案将与下划线或 lodash 的 _.debounce 以及任何用户提供的去抖功能完美配合。
好主意：
因为去抖函数是有状态的，我们必须为每个组件实例创建一个去抖函数。
ES6（类属性）：推荐
class SearchBox extends React.Component {
method = debounce(() => {
...
});
}
ES6（类构造函数）
class SearchBox extends React.Component {
constructor(props) {
super(props);
this.method = debounce(this.method.bind(this),1000);
}
method() { ... }
}
ES5
var SearchBox = React.createClass({
method: function() {...},
componentWillMount: function() {
this.method = debounce(this.method.bind(this),100);
},
});
请参阅JsFiddle：3 个实例为每个实例生成 1 个日志条目（全局生成 3 个）。
不是一个好主意：
var SearchBox = React.createClass({
method: function() {...},
debouncedMethod: debounce(this.method, 100);
});
它不会起作用，因为在类描述对象创建过程中，this 不是自己创建的对象。 this.method 不会返回您所期望的，因为 this 上下文不是对象本身（实际上它实际上并不存在，顺便说一句，因为它刚刚被创建）。
不是一个好主意：
var SearchBox = React.createClass({
method: function() {...},
debouncedMethod: function() {
var debounced = debounce(this.method,100);
debounced();
},
});
这一次您实际上是在创建一个去抖函数，该函数调用您的this.method。问题是您在每次debouncedMethod 调用时都在重新创建它，因此新创建的去抖动函数对以前的调用一无所知！随着时间的推移，您必须重复使用相同的去抖函数，否则去抖将不会发生。
不是一个好主意：
var SearchBox = React.createClass({
debouncedMethod: debounce(function () {...},100),
});
这里有点棘手。
类的所有挂载实例都将共享相同的去抖动函数，而这通常不是你想要的！请参阅JsFiddle：3 个实例在全球仅产生 1 个日志条目。
您必须为每个组件实例创建一个去抖动函数，而不是在类级别创建一个由每个组件实例共享的去抖动函数。
照顾 React 的事件池
这是相关的，因为我们经常想要去抖动或限制 DOM 事件。
在 React 中，您在回调中收到的事件对象（即 SyntheticEvent）会被汇集（现在是 documented）。这意味着在事件回调被调用后，你收到的 SyntheticEvent 会以空属性放回池中，以减少 GC 压力。
因此，如果您与原始回调异步访问 SyntheticEvent 属性（如果您限制/去抖动，可能会出现这种情况），您访问的属性可能会被删除。如果您希望事件永远不会被放回池中，您可以使用persist() 方法。
没有持久化（默认行为：池事件）
onClick = e => {
alert(`sync -> hasNativeEvent=${!!e.nativeEvent}`);
setTimeout(() => {
alert(`async -> hasNativeEvent=${!!e.nativeEvent}`);
}, 0);
};
第二个（异步）将打印hasNativeEvent=false，因为事件属性已被清理。
与坚持
onClick = e => {
e.persist();
alert(`sync -> hasNativeEvent=${!!e.nativeEvent}`);
setTimeout(() => {
alert(`async -> hasNativeEvent=${!!e.nativeEvent}`);
}, 0);
};
第二个（异步）将打印hasNativeEvent=true，因为persist 允许您避免将事件放回池中。
您可以在这里测试这两种行为：JsFiddle
阅读Julen's answer 了解使用persist() 和节流/去抖动功能的示例。