0

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

为什么我经常使用它?

我有很多东西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钩子相同。

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

4

1 回答 1

1

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

于 2020-04-27T14:23:10.000 回答