javascript - 为什么 React-boilerplate selector.js 导出调用 createSelector 的方法而不是直接导出选择器？

Question

我正在使用react-boilerplate，它又使用reselect。我注意到他们对重新选择的使用与记录重新选择的方式有点不同。事实上，如果不是因为我很确定框架的开发人员知道他们比我做得更好，并且他们的方法是有原因的，我会认为它会击败重新选择的优势。我试图更好地理解这个原因，以便我知道如何继续向样板文件中添加选择器。我的困惑是 react 样板的导出方法调用 createSelector，而不是导出已经创建的选择器。

Reselect的文档有一个选择器文件，它导出已经创建的选择器，然后直接在mapStateToProps中调用这些选择器。所以像这样:

选择器.js:

export const basicSelector = (state) => (state.basic.data);

export const fooSelector = createSelector(basicSelector, (state) => (state.get(foo));

export const barSelector = createSelector(basicSelector, (state) => (state.get(foo)));

在组件中:

function mapStateToProps(state) => ({
    foo: fooSelector(state),
    bar: barSelector(state),
});

但是，react-boilerplate 的选择器改为导出调用 createSelector 的方法，而不是直接导出创建的选择器。所以像这样:

选择器.js:

export const basicSelector = (state) => (state.basic.data);

export const fooSelector = () => {
  return createSelector(basicSelector, (state) => (state.get(foo)));
}

export const barSelector = () => {
  return createSelector(basicSelector, (state) => (state.get(foo)));
}

在组件中:

const mapStateToProps = createStructuredSelector({
  foo: fooSelector(),
  bar: barSelector(),
});

调用这些虚拟方法来创建选择器的动机是什么？我本以为 react 样板方法意味着如果我在不同的组件中重用选择器，则每个组件将具有不同的选择器实例；这反过来意味着每个组件都必须在状态更改时计算选择器的结果，而不是一次性完成，最终导致冗余计算。

正如我所说，我怀疑我错过了一些东西，因为我怀疑广泛使用的框架根本无法正确使用重新选择。有人可以向我解释一下这样做的好处，以及为什么/如果我应该保持 react 样板的方法而不是按照重新选择文档显示的方式进行操作？

Answer 1

您在第二个示例中描述的并不完全是选择器，而是选择器工厂。它创建并返回一个新的选择器。

有时sharing selectors among different components这很棘手，因为每个组件可能会使用不同的参数调用选择器，从而使每次调用时的reselect缓存失效。

选择器工厂通过为每个连接的组件分配一个新的不同选择器来避免此问题。

按照惯例，选择器工厂名称通常以 make 开头，例如 makeSelectBar 或 makeGetBar。