reactjs - 有人可以解释如何在重新选择库中的函数中使用输入函数吗？

Question

https://github.com/reduxjs/reselect/blob/master/src/index.js#L89

export function defaultMemoize(func, equalityCheck = defaultEqualityCheck) {
  let lastArgs = null
  let lastResult = null
  // we reference arguments instead of spreading them for performance reasons
  return function () {
    if (!areArgumentsShallowlyEqual(equalityCheck, lastArgs, arguments)) {
      // apply arguments instead of spreading for performance.
      lastResult = func.apply(null, arguments)
    }

    lastArgs = arguments
    return lastResult
  }
}

export function createSelectorCreator(memoize, ...memoizeOptions) {
  return (...funcs) => {
    let recomputations = 0
    const resultFunc = funcs.pop()
    const dependencies = getDependencies(funcs)

    const memoizedResultFunc = memoize(
      function () {
        recomputations++
        // apply arguments instead of spreading for performance.
        return resultFunc.apply(null, arguments)
      },
      ...memoizeOptions
    )
...}
}


export const createSelector = createSelectorCreator(defaultMemoize)

所以如果我创建createSelector(getUsers, (users) => users)一个简单的例子。上面的代码是如何运行的？

createSelectorCreator(defaultMemoize)用getUsers, (users) => users输入调用。现在defaultMemoize也是一个返回函数的函数。它们如何交互以返回值？

标签： reactjsfunctional-programmingcurryingreselect

Answer 1

我认为重新选择如何工作更重要的是为什么要使用它。主要原因是可组合性和记忆性：

可组合性

另一种说法是您编写一次选择器并在其他更详细的选择器中重新使用它。假设我有这样的状态：{data:{people:[person,person ...]}然后我可以这样写一个 filterPerson ：

const selectData = state => state.data;
const selectDataEntity = createSelector(
  selectData,//re use selectData
  (_, entity) => entity,
  (data, entity) => data[entity]
);
const filterDataEntity = createSelector(
  selectDataEntity,//re use selectDataEntity
  (a, b, filter) => filter,
  (entities, filter) => entities.filter(filter)
);

如果我将数据移动到state.apiResult然后我只需要更改selectData，这将最大限度地重复使用代码并最大限度地减少实现的重复。

记忆

记忆意味着当您多次调用具有相同参数的函数时，该函数只会执行一次。纯函数在给定相同参数的情况下返回相同的结果，无论它们被调用多少次或何时被调用。

这意味着当您使用相同的参数再次调用该函数时不需要执行该函数，因为您已经知道结果。

记忆化可用于不调用昂贵的函数（如过滤大型数组）。在 React 中，memoization 很重要，因为如果 props 发生变化，纯组件将重新渲染：

const mapStateToProps = state => {
  //already assuming where data is and people is not
  //  a constant
  return {
    USPeople: state.data.people.filter(person=>person.address.countey === US)
  }
}

即使state.data.people不更改过滤器功能，每次都会返回一个新数组。

这个怎么运作

下面是对 createSelector 的重新编写，并附有一些评论。删除了一些可以安全检查参数并允许您使用函数数组调用 createSelector 的代码。如果您有任何难以理解的内容，请发表评论。

const memoize = fn => {
  let lastResult,
    //initial last arguments is not going to be the same
    //  as anything you will pass to the function the first time
    lastArguments = [{}];
  return (...currentArgs) => {//returning memoized function
    //check if currently passed arguments are the same as
    //  arguments passed last time
    const sameArgs =
      currentArgs.length === lastArguments.length &&
      lastArguments.reduce(
        (result, lastArg, index) =>
          result && Object.is(lastArg, currentArgs[index]),
        true
      );
    if (sameArgs) {
      //current arguments are same as last so just
      //  return the last result and don't execute function
      return lastResult;
    }
    //current arguments are not the same as last time
    //  or function called for the first time, execute the
    //  function and set last result
    lastResult = fn.apply(null, currentArgs);
    //set last args to current args
    lastArguments = currentArgs;
    //return result
    return lastResult;
  };
};

const createSelector = (...functions) => {
  //get the last function by popping it off of functions
  //  this mutates functions so functions does not have the
  //  last function on it anymore
  //  also memoize the last function
  const lastFunction = memoize(functions.pop());
  //return a selector function
  return (...args) => {
    //execute all the functions (last was already removed)
    const argsForLastFunction = functions.map(fn =>
      fn.apply(null, args)
    );
    //return the result of a call to lastFunction with the
    //  result of the other functions as arguments
    return lastFunction.apply(null, argsForLastFunction);
  };
};
//selector to get data from state
const selectData = state => state.data;
//select a particular entity from state data
//  has 2 arguments: state and entity where entity
//  is a string (like 'people')
const selectDataEntity = createSelector(
  selectData,
  (_, entity) => entity,
  (data, entity) => data[entity]
);
//select an entity from state data and filter it
//  has 3 arguments: state, entity and filterFunction
//  entity is string (like 'people') filter is a function like:
//  person=>person.address.country === US
const filterDataEntity = createSelector(
  selectDataEntity,
  (a, b, filter) => filter,
  (entities, filter) => entities.filter(filter)
);
//some constants
const US = 'US';
const PEOPLE = 'people';
//the state (like state from redux in connect or useSelector)
const state = {
  data: {
    people: [
      { address: { country: 'US' } },
      { address: { country: 'CA' } },
    ],
  },
};
//the filter function to get people from the US
const filterPeopleUS = person =>
  person.address.country === US;
//get people from the US first time
const peopleInUS1 = filterDataEntity(
  state,
  PEOPLE,
  filterPeopleUS
);
//get people from the US second time
const peopleInUS2 = filterDataEntity(
  state,
  PEOPLE,
  filterPeopleUS
);

console.log('people in the US:', peopleInUS1);
console.log(
  'first and second time is same:',
  peopleInUS1 === peopleInUS2
);