重新选择 - 如何找出哪个参数发生了变化？

Question

Selectors are efficient. A selector is not recomputed unless one of its arguments changes.

我正在尝试调试一个被调用频率高于预期的选择器。有没有办法记录为什么重新计算特定选择器（即更改了哪个参数）？

示例：

export const totalSelector = createSelector(
  [subtotalSelector, taxSelector]
  (subtotal, tax) => ({ total: someExpensiveCalculation(subtotal, tax) })
)

现在假设 totalSelector 的 return 值通过 mapStateToProps 作为 result 属性提供给某个组件。 why-did-you-render 报告由于更改 result 的引用（而非值）而导致不必要的渲染。因此我知道 totalSelector 必须重新计算，并且我们从文档中知道它仅在其输入更改时发生（示例中的 subtotal 或 tax）。我如何判断触发更改的是 subtotal 还是 tax 或两者？

为了便于解释，我们假设 subtotal 和 tax 都是对象，因此它们通过引用传递。

Answer 1

你应该看看这个工具：https://github.com/welldone-software/why-did-you-render

放在组件上（用connect包裹的那个）它会告诉你哪些props是deep equal而不是shallow equal。

Answer 2

在我的情况下对我有帮助的一件事是在此 line 处放置一个断点，以便您可以清楚地看到导致重新计算的参数。

Answer 3

这是 createSelector 的简单替代品，它将记录第一个更改的参数值：

const createDebugSelector = createSelectorCreator(defaultMemoize, {
  equalityCheck: (previousVal, currentVal) => {
    const rv = currentVal === previousVal;
    if (!rv) console.log('Selector param value changed', currentVal);
    return rv;
  },
});

重新选择 - 如何找出哪个参数发生了变化？

Reselect - how to figure out which argument changed?

javascript

reactjs

redux

react-redux

reselect