Notas de estudio: optimización del rendimiento en react

---

Para optimizar el rendimiento del proyecto react, lo más importante es reducir el número de renders y lograr actualizaciones parciales de componentes.

1.React.memo () ：

La función React.memo () se usa principalmente para comparar los valores en los accesorios en el "componente de función" para determinar si el componente necesita ser re-renderizado. Dedicado a los componentes funcionales, necesita consumir rendimiento.

Uso: Solo se usa cuando se espera que el componente de función renderizado sea relativamente grande y habrá una gran cantidad de renderizado sin sentido.

const UILIst = React.memo(({list, data}) => (
    <div></div>
))

 La función React.memo () también puede comparar los valores en el contexto del componente de la función para determinar si es necesario volver a renderizarlo. 

let UIListHeaderOrderFn = React.memo(
     ({ data: { orderDir, orderCol }, changeOrderDir, changeOrderCol }) => (
         <div className={style["page-header-order"]}>
             <i className={`iconfont icon-sort-${ orderDir === "asc"?"asc":"desc"}`}
                 onClick={ changeOrderDir }></i>
             <span className={`${ orderCol === "price" ? style["active"] : "" }`}
                 onClick={() => changeOrderCol("price")}>价格</span>
             <span className={`${ orderCol === "sale" ? style["active"] : "" }`}
                 onClick={() => changeOrderCol("sale")}>销量</span>
             <span className={`${ orderCol === "rate" ? style["active"] : "" }`}
                 onClick={() => changeOrderCol("rate")}>评价</span>
         </div>
    ),
    (prevData, nextData) => prevData.orderCol === nextData.orderCol && 
                            prevData.orderDir === nextData.orderDir
);

const UIListHeaderOrder = () => (
        <Context.Consumer>
                {(contextData) => <UIListHeaderOrderFn { ...contextData }/>}
        </Context.Consumer>
);

Clase 2.PureComponent:

PureComponent se utiliza principalmente para componentes de clase. Cuando se crea un componente, hereda PureComponent. Se optimizará la actualización de renderizado del componente.

Su esencia es determinar si los datos de accesorios han cambiado en shouldComponentUpdate del componente de clase. Si no hay cambios, no se realiza ninguna actualización, se reducen los renderizados innecesarios y se mejora el rendimiento.

import React, {PureComponent} from 'react';

class Child extends PureComponent {}

3.shouldComponentUpdate () 函数 ：

Esta función se utiliza principalmente para optimizar el rendimiento del renderizado.

Escriba la lógica apropiada en la función y devuelva verdadero o falso. Si es verdadero, significa que la actualización está permitida y falso significa que no es necesario actualizar.

Esto puede reducir las operaciones de actualización innecesarias.

shouldComponentUpdate(nextProps){
    console.log("child组件的shouldComponentUpdate运行了");
    return this.props.b !== nextProps.b;
}

// 如果不写默认返回true

---

Los anteriores son algunos métodos de optimización del rendimiento. Sin embargo, generalmente se usa para proyectos grandes. No es necesario utilizar la optimización del rendimiento para proyectos pequeños y medianos. La optimización del rendimiento consiste en hacer que los componentes cuyos datos cambien se actualicen parcialmente, en lugar de realizar actualizaciones con componentes irrelevantes.