javascript - 使用useSelector一次或多次有性能差异吗？

Question

我基本上想知道以下两个代码片段之间是否存在性能差异或任何其他优缺点。是否有任何客观原因选择使用其中一种，或者只是个人喜好？

const prop1 = useSelector((state) => state.appModel.prop1);
const prop2 = useSelector((state) => state.appModel.prop2);
const prop3 = useSelector((state) => state.appModel.prop3);
const prop4 = useSelector((state) => state.appModel.prop4);

const {
  prop1,
  prop2,
  prop3,
  prop4,
} = useSelector((state) => ({
  prop1: state.appModel.prop1,
  prop2: state.appModel.prop2,
  prop3: state.appModel.prop3,
  prop4: state.appModel.prop4,
}));

第二个选项本能地感觉它可能性能更高，因为它只使用 useSelector 一次，但我想知道一个属性的更改是否可能会导致更多的重新渲染，因为它们都组合在一起。

更新:

还想知道这个更短的版本是否有任何优点和缺点？

const { prop1, prop2, prop3, prop4 } = useSelector((state) => state.appModel);

如果这是重复的，我深表歉意，我尝试搜索，但不完全确定要搜索的术语，并且看不到任何匹配的示例。

Answer 1

个人的性能要好得多。第二种方法在每次调用选择器时都会创建一个新对象，因此当 useSelector 比较之前和之后时，它总是看起来像是发生了变化。因此，即使 prop1-prop4 没有发生任何变化，您的组件也被迫在 redux 存储的每次更改时进行渲染。

如果您想做#2，您需要创建一个内存选择器，以便在所有单个值都没有更改的情况下返回相同的对象。您可以在此处阅读有关内存选择器的更多信息:https://redux.js.org/usage/deriving-data-selectors#optimizing-selectors-with-memoization

(虽然了解内存选择器很好，但对于您的情况，我建议坚持使用方法#1)

Also wondering if this even shorter version has any pros and cons?

const { prop1, prop2, prop3, prop4 } = useSelector((state) => state.appModel);

这比 #2 更好，因为现在它只需要在 appModel 更改时重新渲染。如果appModel中只有prop1-prop4，那么这基本上与#1相同。如果 appModel 中有您不关心的额外属性，那么当 appModel 由于这些其他属性而发生更改时，这可能会导致一些额外的渲染。