React Native 项目FlatList上拉加载函数onE

问题描述：
在使用FlatList做上拉加载数据的时候，发现onEndReached总是会同时调用两次，据说这个FlatList一个bug。

解决办法：
使用 lodash 避免短时间内重复调用同一个函数

第一步： 需要导入

import * as _ from 'lodash';

第二步： 在构造方法中做如下配置，其中getMoreData是上拉加载要调用的函数

constructor(props) {
    super(props);

    this.state = {};

    /*
     * 第一个参数（函数）：想在一段时间内避免重复调用的函数
     * 第二个参数（数字）：限制时间(ms)
     * 第三个参数（对象）：可选配置，主要有两个属性（注：这个是我在源码中看到的，跟下面参考地址中说的不太一样）
     *     leading，函数在每个等待时延的开始被调用，默认值为true
     *     trailing，函数在每个等待时延的结束被调用，默认值是true
     */
    this.loadMoreDataThrottled = _.throttle(this.getMoreData, 500, {trailing: false});
}

说明： 如果在throttle函数中不传可选配置{trailing: false}，则依然会调用两次，一次是在开始时调用，另一次是在限制时间结束后调用。

第三步： 在上拉加载回调函数onEndReached中调用（重点： 此时会去调用上面配置的getMoreData函数，并且在500ms内不会重复调用。）

onEndReached={this.loadMoreDataThrottled}

最后：

componentWillUnmount() {
    this.loadMoreDataThrottled.cancel();
}

throttle.js文件源码：

var debounce = require('./debounce'),
    isObject = require('./isObject');

/** Error message constants. */
var FUNC_ERROR_TEXT = 'Expected a function';

/**
 * Creates a throttled function that only invokes `func` at most once per
 * every `wait` milliseconds. The throttled function comes with a `cancel`
 * method to cancel delayed `func` invocations and a `flush` method to
 * immediately invoke them. Provide `options` to indicate whether `func`
 * should be invoked on the leading and/or trailing edge of the `wait`
 * timeout. The `func` is invoked with the last arguments provided to the
 * throttled function. Subsequent calls to the throttled function return the
 * result of the last `func` invocation.
 *
 * **Note:** If `leading` and `trailing` options are `true`, `func` is
 * invoked on the trailing edge of the timeout only if the throttled function
 * is invoked more than once during the `wait` timeout.
 *
 * If `wait` is `0` and `leading` is `false`, `func` invocation is deferred
 * until to the next tick, similar to `setTimeout` with a timeout of `0`.
 *
 * See [David Corbacho's article](https://css-tricks.com/debouncing-throttling-explained-examples/)
 * for details over the differences between `_.throttle` and `_.debounce`.
 *
 * @static
 * @memberOf _
 * @since 0.1.0
 * @category Function
 * @param {Function} func The function to throttle.
 * @param {number} [wait=0] The number of milliseconds to throttle invocations to.
 * @param {Object} [options={}] The options object.
 * @param {boolean} [options.leading=true]
 *  Specify invoking on the leading edge of the timeout.
 * @param {boolean} [options.trailing=true]
 *  Specify invoking on the trailing edge of the timeout.
 * @returns {Function} Returns the new throttled function.
 * @example
 *
 * // Avoid excessively updating the position while scrolling.
 * jQuery(window).on('scroll', _.throttle(updatePosition, 100));
 *
 * // Invoke `renewToken` when the click event is fired, but not more than once every 5 minutes.
 * var throttled = _.throttle(renewToken, 300000, { 'trailing': false });
 * jQuery(element).on('click', throttled);
 *
 * // Cancel the trailing throttled invocation.
 * jQuery(window).on('popstate', throttled.cancel);
 */
function throttle(func, wait, options) {
  var leading = true,
      trailing = true;

  if (typeof func != 'function') {
    throw new TypeError(FUNC_ERROR_TEXT);
  }
  if (isObject(options)) {
    leading = 'leading' in options ? !!options.leading : leading;
    trailing = 'trailing' in options ? !!options.trailing : trailing;
  }
  return debounce(func, wait, {
    'leading': leading,
    'maxWait': wait,
    'trailing': trailing
  });
}

module.exports = throttle;

参考地址：

https://www.jianshu.com/p/bacd268ef6ce