有没有办法 shorthand 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);
...

有没有 shorthand 这个但不会导致渲染的方法？

游乐场示例：

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

Answer 1

定义要获取的变量：let var1, var2, var3, var4, ...;

为useSelector函数内的那些变量赋值：

let var1, var2, var3, var4, var5...;
const obj = useSelector(({example}) => {var1 = example.var1; var2 = example.var2; var3 = example.var3; var4 = example.var4; var5 = example.var5
  return {var1, var2, var3, var4, var5}
 });

您的游乐场示例：https://codesandbox.io/s/inspiring-bhabha-9b9qoq?file=/src/Header.js

Answer 2

是也不是。您可以创建一个包含您实际需要的所有值的对象，然后使用与您的减速器进行浅比较以确保它不会经常重新渲染。

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

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

感兴趣

有没有办法 shorthand useSelector 而不是导致不必要的渲染？

Is there a way to shorthand useSelector instead of causing unnecessary renders?

reactjs

redux