reactjs - 有没有办法速记 useSelector 而不是导致不必要的渲染？

Question

考虑这两个调用

const loading = useSelector((state) => state.example.loading); 
const { loading } = useSelector((state) => state.example);

const { loading } = useSelector((state) => state.example); 会使组件在示例切片中的其他变量发生变化时导致不必要的渲染。这一个 const loading = useSelector((state) => state.example.loading); 不会因为它只获取 loading 变量。

在我正在清理的一个应用程序中，一个小组成员写了 const { var1, var2, var3....var50 } = useSelector((state) => state.example); 和它会在整个应用程序中造成不必要的渲染。而不是重写

const var1 = useSelector((state) => state.example.var1);
const var2 = useSelector((state) => state.example.var2);
...

有没有办法在不引起渲染的情况下简写这个？

Playground 示例:

https://codesandbox.io/s/cool-dew-7pfclw?file=/src/Header.js

Answer 1

是也不是。您可以创建一个包含您实际需要的所有值的对象，然后使用与您的缩减器进行浅比较以确保它不会过于频繁地重新呈现。

它的代码可能更少，但老实说我不确定它是否更具可读性。

您还可以使用代理查看其他选择器库以跟踪何时更新。 there are some alternative candiates mentioned in the redux docs ，您可能对 proxy-memoize 感兴趣。