2

我正在使用react-boilerplate，它又使用reselect。我注意到他们对重新选择的使用与记录重新选择的方式有点不同。事实上，如果不是因为我很确定框架的开发人员知道他们比我做得更好并且他们的方法是有原因的，我会认为它会破坏重新选择的优势。我试图更好地理解这个原因，所以我知道如何继续向样板添加选择器。我的困惑是 react-boilerplate 的导出方法调用 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-boilerplates 方法意味着如果我在不同的组件中重用一个选择器，那么每个组件都会有一个不同的选择器实例；这反过来意味着每个组件都必须在状态改变时计算选择器的结果，而不是只完成一次，最终导致冗余计算。

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

4

1 回答 1

2

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

有时在不同组件之间共享选择器很棘手，因为每个组件可能会使用不同的参数调用选择器，从而reselect在每次调用时使缓存无效。

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

make按照约定，选择器工厂名称通常以likemakeSelectBar或开头makeGetBar。

于 2017-09-07T23:13:45.860 回答