Question

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

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

selector.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的方法，而不是直接导出创建的选择器。所以像这样：

selector.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方法意味着如果我在不同的组件中重用一个选择器，那么每个组件都会有一个不同的选择器实例;这反过来意味着每个组件必须在状态发生变化时计算选择器的结果，而不是一旦完成，最终导致冗余计算。

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

Answer 1

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

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

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

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

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

1 个答案: