Ya no busques más por otras páginas porque llegaste al lugar correcto, poseemos la respuesta que necesitas encontrar pero sin problemas.
Solución:
Todos los componentes de reacción implementan el shouldComponentUpdate() método. Por defecto (componentes que se extienden React.Component), esto vuelve true, siempre. El cambio de memorizar un componente (mediante React.memo para componentes funcionales o ampliación React.PureComponent para los componentes de clase) introduce es una implementación de la shouldComponentUpdate() método – que hace la comparación superficial del estado y los accesorios.
Mirando la documentación sobre los métodos del ciclo de vida del componente, shouldComponentUpdate() es siempre llamado antes de que ocurra el renderizado, esto significa que memorizar un componente incluirá esta comparación superficial adicional en cada actualización.
Teniendo esto en cuenta, memorizar un componente lo hace tienen efectos en el rendimiento, y la magnitud de estos efectos debe determinarse mediante el perfilado de su aplicación y determinando si funciona mejor con o sin memorización.
Para responder a su pregunta, no creo que haya una regla explícita sobre cuándo debe o no memorizar componentes, sin embargo, creo que se debe aplicar el mismo principio que cuando decide si debe o no anular shouldComponentUpdate(): encuentre problemas de rendimiento a través de las herramientas de creación de perfiles sugeridas e identifique si necesita o no optimizar un componente.
Siempre debes usar React.memo LITERALMENTE, ya que comparar el árbol devuelto por el Componente siempre es más caro que comparar un par de props propiedades
Así que no escuches a nadie y envuelve TODOS los componentes funcionales en React.memo. React.memo originalmente estaba destinado a integrarse en el núcleo de los componentes funcionales, pero no se usa de forma predeterminada debido a la pérdida de compatibilidad con versiones anteriores. (Dado que compara el objeto superficialmente, y QUIZÁS esté utilizando las propiedades anidadas del subobjeto en el componente) =)
Eso es todo, esta es la ÚNICA RAZÓN por la que React no usa memo automáticamente. =)
De hecho, podrían hacer la versión 17.0.0, que ROMPERÍA la compatibilidad con versiones anteriores, y haría React.memo por defecto, y hacer algún tipo de función para cancelar este comportamiento, por ejemplo React.deepProps =)
Dejen de escuchar a los teóricos, muchachos =) La regla es simple:
Si su componente usa COMPARACIÓN PROFUNDA, entonces no use memo, de lo contrario úselo SIEMPRE, comparar DOS OBJETOS SIEMPRE es MÁS BARATO que llamar React.createElement() y comparar dos árboles, crear FiberNodes, etc.
Los teóricos hablan de lo que ellos mismos no saben, no han analizado el código de reacción, no entienden FRP y no entienden lo que aconsejan =)
PS si su componente está usando children apuntalar, React.memo no funcionará, porque children prop siempre hace una nueva array. Pero es mejor no preocuparse por esto, e incluso tales componentes TAMBIÉN deben estar envueltos en React.memoya que los recursos informáticos son insignificantes.
¿Habrá alguna vez una situación que afecte negativamente el rendimiento?
Si. Puede terminar con un peor rendimiento, si todos los componentes están envueltos sin pensar por React.memo.
No es necesario en muchos casos. Para probarlo con un componente crítico para el rendimiento, realice primero algunas medidas, agregue memorización y luego vuelva a medir para ver si la complejidad adicional valió la pena.
¿Cuál es el costo de React.memo?
Un componente memorizado compara los accesorios antiguos con los de noticias para decidir si volver a renderizar. cada ciclo de renderizado.
A un componente simple no le importa y solo se renderiza, después de los accesorios/cambio de estado en un padre.
Echa un vistazo a Reaccionar shallowEqual implementación, que se invoca en updateMemoComponent.
Cuándo NO usar React memo?
No hay reglas estrictas. Cosas que afectan React.memo negativamente:
- el componente a menudo se vuelve a renderizar con accesorios, que han cambiado de todos modos
- el componente es barato de volver a renderizar
- la función de comparación es costosa de realizar
Anuncio 1: En este caso, React.memo no puede evitar una nueva representación, pero tuvo que hacer cálculos adicionales.
Anuncio 2: el costo de comparación agregado no vale la pena para un componente “simple” en términos de procesamiento, reconciliación, cambio de DOM y costos de efectos secundarios.
Anuncio 3: Cuantos más apoyos, más cálculos. También puede pasar un comparador personalizado más complejo.
cuando se complementa React.memo?
Solo verifica accesorios, no cambios de contexto o cambios de estado desde adentro. React.memo también es inútil, si el componente memorizado tiene no primitivo children. useMemo puede complementar memo aquí, como:
// inside React.memo component
const ctxVal = useContext(MyContext); // context change normally trigger re-render
return useMemo(() =>