将 Lodash _.throttle() 与 ReactJS 一起使用答案

【问题标题】：Using Lodash _.throttle() with ReactJS将 Lodash _.throttle() 与 ReactJS 一起使用
【发布时间】：2018-06-03 02:17:20
【问题描述】：

我正在尝试使用 Lodash 节流函数来节流文本输入上的 onChangeText 事件。不过好像没什么区别：

<TextInput {...this.c('tokenInput')}
    onChangeText={ _.throttle((text) => {
        this.onChangeText(text)
    }, 1000) }
    value={this.state.text}
    placeholder='Select...'
/>

我怎样才能做到这一点？每次我在输入中输入内容时，它都会在每次更改时继续执行 onChangeText()。

【问题讨论】：

那是因为您将 onChangeText 设置为等于函数返回值，而不是函数。这意味着每次重新渲染时，它都会执行节流功能。应该像onChangeText={ (text) => {/*do throttle stuff here*/} }
@Jayce444 我把它改成了onChangeText={(text) => { _.throttle((text) => { this.onChangeText(text) }, 1000) }}。现在根本不执行 onChangeText 方法。你能举个例子说明实现应该是什么样子吗？
@Jayce444 _.throttle 返回一个函数
你在代码的任何地方都做了onChangeText函数绑定吗？
@Dez 不，没有约束力

标签： javascript reactjs underscore.js lodash

【解决方案1】：

onChange 必须是一个函数，但在您的上下文中它是一个函数调用。所以要解决这个问题，你必须这样做：

<TextInput {...this.c('tokenInput')}
    onChangeText={ text => _.throttle(x => {
        this.onChangeText(x)
    }, 1000)(text) }
    value={this.state.text}
    placeholder='Select...'
/>

【讨论】：

这没有任何作用。 onChangeText() 方法根本没有被执行。
_.throttle 返回一个函数
那么onChangeText是错误的方法。也许它只是 onChange？
您确定它没有节流吗？也许它似乎没有节流。您可以将周期更改为 10000 以检查它是否仍然无法正常工作吗？
@Tobias Something For 将来如果您遇到此问题（和其他问题），它不起作用，因为每次触发 onChangeText 时都会重新渲染组件，因此油门会消失回到零，因为这一切都被重新渲染。油门应该在 onChangeText 调用的函数内部执行，而不是在渲染方法本身内部执行。感谢您的帮助:)