在React.js中执行去抖动
你如何在React.js中执行debounce？
我想去除handleOnChange。
我试着debounce(this.handleOnChange, 200)但它不起作用。
function debounce(fn, delay) { var timer = null; return function () { var context = this, args = arguments; clearTimeout(timer); timer = setTimeout(function () { fn.apply(context, args); }, delay); }; } var SearchBox = React.createClass({ render:function () { return ( <input type="search" name="p" onChange={this.handleOnChange}/> ); }, handleOnChange: function (event) { //make ajax call } });
这里的重要部分是为每个组件实例创build一个单一的去抖（或限制）函数 。 您不希望每次都重新创build去抖动（或油门）function，而且也不希望多个实例共享相同的去抖function。
我没有定义在这个答案debouncing函数，因为它不是真正相关的，但是这个答案将工作完全正确与_.debounce的下划线或lodash，以及用户提供的去抖动function。
不是一个好主意：
var SearchBox = React.createClass({ method: function() {...}, debouncedMethod: debounce(this.method,100); });
这是行不通的，因为在创build类描述对象的时候， this不是自己创build的对象。 this.method不会返回你所期望的，因为this上下文不是对象本身（它实际上并不真正存在，因为它正在创buildBTW）。
不是一个好主意：
var SearchBox = React.createClass({ method: function() {...}, debouncedMethod: function() { var debounced = debounce(this.method,100); debounced(); }, });
这次你正在创build一个调用你的this.method的去抖动函数。 问题是，你正在重新创build每个debouncedMethod调用，所以新创build的debounce函数不知道任何关于以前的调用！ 您必须随时间重复使用相同的去抖function，否则将不会发生去抖动。
不是一个好主意：
var SearchBox = React.createClass({ debouncedMethod: debounce(function () {...},100), });
这里有点棘手。
该类的所有挂载的实例将共享相同的去抖function，并且大多数情况下这不是你想要的！ 请参阅JsFiddle ：3个实例仅在全局生成1个日志条目。
您必须为每个组件实例创build一个去抖动函数，而不是在每个组件实例共享的类级别的单个去抖动函数。
好主意：
因为去抖动函数是有状态的，所以我们必须为每个组件实例创build一个去抖动函数 。
ES6（class级物业） ：推荐
class SearchBox extends React.Component { method = debounce(() => { ... }); }
ES6（类构造函数）
class SearchBox extends React.Component { constructor(props) { super(props); this.method = debounce(this.method,1000); } method() { ... } }
ES5
var SearchBox = React.createClass({ method: function() {...}, componentWillMount: function() { this.method = debounce(this.method,100); }, });
请参阅JsFiddle ：3个实例正在生成每个实例1个日志条目（全局3个）。
照顾React的事件池
这是相关的，因为我们经常要去抖或扼杀DOM事件。
在React中，您在callback中收到的事件对象（即SyntheticEvent ）将被合并（现在已经logging ）。 这意味着在事件callback被调用之后，您接收到的SyntheticEvent将被放回到具有空属性的池中，以降低GC压力。
所以如果你访问SyntheticEvent属性asynchronous到原来的callback（因为它可能是这种情况，如果油门/去抖动），您访问的属性可能会被删除。 如果您希望事件永远不会放回池中，则可以使用persist()方法。
没有坚持（默认行为：池事件）
onClick = e => { alert(`sync -> hasNativeEvent=${!!e.nativeEvent}`); setTimeout(() => { alert(`async -> hasNativeEvent=${!!e.nativeEvent}`); }, 0); };
第二个（asynchronous）将打印hasNativeEvent=false因为事件属性已被清除。
坚持
onClick = e => { e.persist(); alert(`sync -> hasNativeEvent=${!!e.nativeEvent}`); setTimeout(() => { alert(`async -> hasNativeEvent=${!!e.nativeEvent}`); }, 0); };
第二个（asynchronous）将打印hasNativeEvent=true因为persist（）允许避免将事件放回池中。
你可以在这里testing这两个行为JsFiddle
阅读Julen的答案 ，以油门/去抖function使用persist() 。
不受控制的组件
你可以使用event.persist()方法 。
下面的示例使用下划线的_.debounce() ：
var SearchBox = React.createClass({ componentWillMount: function () { this.delayedCallback = _.debounce(function (event) { // `event.target` is accessible now }, 1000); }, onChange: function (event) { event.persist(); this.delayedCallback(event); }, render: function () { return ( <input type="search" onChange={this.onChange} /> ); } });
编辑：看到这个JSFiddle
受控组件
更新：上面的例子显示了一个不受控制的组件 。 我总是使用受控元素，所以这里是上面的另一个例子，但是不使用event.persist() “trickery”。
JSFiddle也是可用的 。 没有下划线的例子
var SearchBox = React.createClass({ getInitialState: function () { return { query: this.props.query }; }, componentWillMount: function () { this.handleSearchDebounced = _.debounce(function () { this.props.handleSearch.apply(this, [this.state.query]); }, 500); }, onChange: function (event) { this.setState({query: event.target.value}); this.handleSearchDebounced(); }, render: function () { return ( <input type="search" value={this.state.query} onChange={this.onChange} /> ); } }); var Search = React.createClass({ getInitialState: function () { return { result: this.props.query }; }, handleSearch: function (query) { this.setState({result: query}); }, render: function () { return ( <div id="search"> <SearchBox query={this.state.result} handleSearch={this.handleSearch} /> <p>You searched for: <strong>{this.state.result}</strong></p> </div> ); } }); React.render(<Search query="Initial query" />, document.body);
编辑：更新的例子和JSFiddles到React 0.12
编辑：更新示例来解决Sebastien Lorber提出的问题
编辑：更新与jsfiddle，不使用下划线，并使用纯JavaScript的反弹。
如果您只需从事件对象获取DOMinput元素，则解决scheme要简单得多 – 只需使用ref
class Item extends React.Component { constructor(props) { super(props); this.saveTitle = _.throttle(this.saveTitle.bind(this), 1000); } saveTitle(){ let val = this.inputTitle.value; // make the ajax call } render() { return <input ref={ el => this.inputTitle = el } type="text" defaultValue={this.props.title} onChange={this.saveTitle} /> } }
下面是我提出的一个例子，用另一个类去掉了一个类。 这很适合做成装饰器/高阶函数：
export class DebouncedThingy extends React.Component { static ToDebounce = ['someProp', 'someProp2']; constructor(props) { super(props); this.state = {}; } // On prop maybe changed componentWillReceiveProps = (nextProps) => { this.debouncedSetState(); }; // Before initial render componentWillMount = () => { // Set state then debounce it from here on out (consider using _.throttle) this.debouncedSetState(); this.debouncedSetState = _.debounce(this.debouncedSetState, 300); }; debouncedSetState = () => { this.setState(_.pick(this.props, DebouncedThingy.ToDebounce)); }; render() { const restOfProps = _.omit(this.props, DebouncedThingy.ToDebounce); return <Thingy {...restOfProps} {...this.state} /> } }
我发现Justin Tulk 这个post非常有帮助。 经过一番尝试后，人们会认为这是更为正式的反应/还原的方式，这表明它由于React的综合事件池而失败。 然后，他的解决scheme使用一些内部状态来跟踪input中更改/input的值，并在setState之后调用一个调用/去抖动的redux动作，实时显示一些结果。
import React, {Component} from 'react' import TextField from 'material-ui/TextField' import { debounce } from 'lodash' class TableSearch extends Component { constructor(props){ super(props) this.state = { value: props.value } this.changeSearch = debounce(this.props.changeSearch, 250) } handleChange = (e) => { const val = e.target.value this.setState({ value: val }, () => { this.changeSearch(val) }) } render() { return ( <TextField className = {styles.field} onChange = {this.handleChange} value = {this.props.value} /> ) } }
为了避免在debounce（）中包装handleOnChange，为什么不把ajax调用包含在debounce中的callback函数内部，从而不会破坏事件对象。 所以像这样的东西：
handleOnChange: function (event) { debounce( $.ajax({}) , 250); }
我正在寻找同样的问题的解决scheme，并遇到这个线程以及一些其他人，但他们也有同样的问题：如果你正在尝试做一个handleOnChange函数，你需要从事件目标的值，你将cannot read property value of null或某些这样的错误的cannot read property value of null 。 在我的情况下，我还需要保留在去抖函数内部的上下文，因为我正在执行一个可变动作。 这是我的解决scheme，它适用于我的用例，所以我留在这里以防万一有人遇到这个线程：
// at top of file: var myAction = require('../actions/someAction'); // inside React.createClass({...}); handleOnChange: function (event) { var value = event.target.value; var doAction = _.curry(this.context.executeAction, 2); // only one parameter gets passed into the curried function, // so the function passed as the first parameter to _.curry() // will not be executed until the second parameter is passed // which happens in the next function that is wrapped in _.debounce() debouncedOnChange(doAction(myAction), value); }, debouncedOnChange: _.debounce(function(action, value) { action(value); }, 300)
如果你正在使用redux，你可以用中间件以非常优雅的方式来做到这一点。 您可以将Debounce中间件定义为：
var timeout; export default store => next => action => { const { meta = {} } = action; if(meta.debounce){ clearTimeout(timeout); timeout = setTimeout(() => { next(action) }, meta.debounce) }else{ next(action) } }
然后，您可以将动作添加到动作创build者，例如：
export default debouncedAction = (payload) => ({ type : 'DEBOUNCED_ACTION', payload : payload, meta : {debounce : 300} }
实际上已经有中间件，你可以下npm为你做这个。
Julen的解决scheme有点难以阅读，对于那些以标题为基础而不是微小细节的人来说，这里有更清晰，更有针对性的反应代码。
tl; dr版本 ：当你更新到观察者发送调用一个时间表方法，而反过来将实际上通知观察者（或执行AJAX等）
用示例组件完成jsfiddle http://jsfiddle.net/7L655p5L/4/
var InputField = React.createClass({ getDefaultProps: function () { return { initialValue: '', onChange: null }; }, getInitialState: function () { return { value: this.props.initialValue }; }, render: function () { var state = this.state; return ( <input type="text" value={state.value} onChange={this.onVolatileChange} /> ); }, onVolatileChange: function (event) { this.setState({ value: event.target.value }); this.scheduleChange(); }, scheduleChange: _.debounce(function () { this.onChange(); }, 250), onChange: function () { var props = this.props; if (props.onChange != null) { props.onChange.call(this, this.state.value) } }, });
你也可以使用自己写的mixin，如下所示：
var DebounceMixin = { debounce: function(func, time, immediate) { var timeout = this.debouncedTimeout; if (!timeout) { if (immediate) func(); this.debouncedTimeout = setTimeout(function() { if (!immediate) func(); this.debouncedTimeout = void 0; }.bind(this), time); } } };
然后在你的组件中像这样使用它：
var MyComponent = React.createClass({ mixins: [DebounceMixin], handleClick: function(e) { this.debounce(function() { this.setState({ buttonClicked: true }); }.bind(this), 500, true); }, render: function() { return ( <button onClick={this.handleClick}></button> ); } });
对于throttle或debounce ，最好的方法是创build一个函数创build器，以便在任何地方使用它，例如：
updateUserProfileField(fieldName) { const handler = throttle(value => { console.log(fieldName, value); }, 400); return evt => handler(evt.target.value.trim()); }
在你的render方法中你可以这样做：
<input onChange={this.updateUserProfileField("givenName").bind(this)}/>
updateUserProfileField方法将在您每次调用它时创build一个分离的函数。
注意不要试图直接返回处理程序，例如这不起作用：
updateUserProfileField(fieldName) { return evt => throttle(value => { console.log(fieldName, value); }, 400)(evt.target.value.trim()); }
之所以这样做是行不通的，因为每次调用这个事件都会产生一个新的油门function，而不是使用相同的油门function，所以油门基本上是无用的;）
另外，如果你使用debounce或者throttle你不需要setTimeout或clearTimeout ，这就是我们为什么使用它们的原因：P
经过一段时间的文字input挣扎，并没有find一个完美的解决scheme，我发现这在npm https://www.npmjs.com/package/react-debounce-input
这是一个简单的例子：
import React from 'react'; import ReactDOM from 'react-dom'; import {DebounceInput} from 'react-debounce-input'; class App extends React.Component { state = { value: '' }; render() { return ( <div> <DebounceInput minLength={2} debounceTimeout={300} onChange={event => this.setState({value: event.target.value})} /> <p>Value: {this.state.value}</p> </div> ); } } const appRoot = document.createElement('div'); document.body.appendChild(appRoot); ReactDOM.render(<App />, appRoot);
DebounceInput组件接受所有可以分配给普通input元素的道具。 在codepen上试试看
我希望它也能帮助别人，节省一些时间。
