什么时候不使用使用备忘录?

Question

我在Functional Components中使用了很多useMemo，我很担心在我们的应用程序中使用它会是一个很好的体验吗？

为什么我经常使用它？

我有很多Components，除非在特殊情况下，否则它们不需要重新渲染，这就是为什么我避免它们重新渲染的原因。

法典：

const App = props => {

const Comp1 = useMemo(()=> <Component1 {...props} a={a} />, [a]);
const Comp2 = useMemo(()=> <Component2 {...props} b={b} />, [b]);
const Comp3 = useMemo(()=> <Component3 {...props} c={c} />, [c]);
const Comp4 = useMemo(()=> <Component4 {...props} d={d} />, [d]);
const Comp5 = useMemo(()=> <Component5 {...props} e={e} />, [e]);
const Comp6 = useMemo(()=> <Component6 {...props} f={f} />, [f]);
const Comp7 = useMemo(()=> <Component7 {...props} g={g} />, [g]);
const Comp8 = useMemo(()=> <Component8 {...props} h={h} />, [h]);
const Comp9 = useMemo(()=> <Component9 {...props} i={i} />, [i]);
return (
<View>
{Comp1}
{Comp2}
{Comp3}
{Comp4}
{Comp5}
{Comp6}
{Comp7}
{Comp8}
{Comp9}
</View>
);
}

我可能有 20 多个Functional Components，在所有这些中，我的情况都与我习惯的useMemo钩子相同。

我的问题是，这是一个影响坏performance而不是好performance的bad experience吗？ 或者根据我的条件没有问题。

Answer 1

我假设 React.memo 的一般建议与 shouldComponentUpdate 和 PureComponent 相同：进行比较确实成本很小，并且在某些情况下组件永远不会正确记忆(特别是如果它使用 props.children)。因此，不要只是自动将所有东西包装在任何地方。查看应用在生产模式下的行为方式，使用 React 的分析构建和 DevTools 探查器查看瓶颈所在，并战略性地使用这些工具来优化组件树中实际受益于这些优化的部分。