Когда не использовать useMemo?

Я часто использую 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? или нет проблем в моих условиях.


person Muhammad    schedule 27.04.2020    source источник
comment
Вот что называется преждевременная оптимизация. Есть ли у вас конкретные проблемы с производительностью, которые вы измеряли? Если это так, то стоит учитывать эту специфику и не оптимизировать все бездумно.   -  person Dennis Vash    schedule 27.04.2020
comment
Честно говоря, я бы сказал, что если вы редко рендерите их, то это причина не запоминать их, если только они не дороги в рендеринге и не будут часто повторно рендериться после рендеринга. Если вы знаете, что компонент будет постоянно перерисовываться и/или его отрисовка обходится дорого, рассмотрите возможность использования useMemo.   -  person terpinmd    schedule 27.04.2020
comment
@DennisVash, спасибо, да, я измерил, некоторые компоненты с использованием useMemo работают хорошо, и я чувствую, что это предотвращает ненужный рендеринг, но иногда в некоторых компонентах я наблюдаю, что в profiler больше «упало» при использовании useMemo.   -  person Muhammad    schedule 27.04.2020
comment
@terpinmd спасибо, может ли функциональный компонент быть дорогим со списком из 30 элементов, следует ли мне избегать его ненужного рендеринга с помощью useMemo?   -  person Muhammad    schedule 27.04.2020


Ответы (1)


Я бы предположил, что для React.memo применим тот же общий совет, что и для shouldComponentUpdate и PureComponent: сравнение требует небольших затрат, и есть сценарии, в которых компонент никогда не будет правильно запоминать (особенно если он использует props.children). . Итак, не просто автоматически обертывать все везде. Посмотрите, как ваше приложение ведет себя в рабочем режиме, используйте профилирующие сборки React и профилировщик DevTools, чтобы увидеть, где находятся узкие места, и стратегически используйте эти инструменты для оптимизации частей дерева компонентов, которые действительно выиграют от этих оптимизаций.

person morteza moradi    schedule 27.04.2020
comment
Не могли бы вы подсказать, что лучше memo() или useMemo ? - person Muhammad; 27.04.2020