Notes d'étude-optimisation des performances dans React

---

Pour optimiser les performances du projet react, le plus important est de réduire le nombre de rendus et de réaliser des mises à jour partielles des composants.

1.React.memo () ：

La fonction React.memo () est principalement utilisée pour comparer les valeurs des accessoires dans le "composant de fonction" pour déterminer si le composant doit être rendu à nouveau. Dédié aux composants fonctionnels, besoin de consommer des performances.

Utilisation: il n'est utilisé que lorsque le composant de la fonction rendue est censé être relativement grand et qu'il y aura beaucoup de re-rendu dénué de sens.

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

 La fonction React.memo () peut également comparer les valeurs dans le contexte du composant de fonction pour déterminer s'il doit être rendu à nouveau. 

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>
);

Classe 2.PureComponent:

PureComponent est principalement utilisé pour les composants de classe. Lorsqu'un composant est créé, il hérite de PureComponent. La mise à jour du rendu du composant sera optimisée.

Son essence est de déterminer si les données des accessoires ont changé dans le shouldComponentUpdate du composant de classe. S'il n'y a pas de modification, aucune mise à jour n'est effectuée, les rendus inutiles sont réduits et les performances sont améliorées.

import React, {PureComponent} from 'react';

class Child extends PureComponent {}

3.shouldComponentUpdate () 函数 ：

Cette fonction est principalement utilisée pour optimiser les performances de rendu.

Écrivez la logique appropriée dans la fonction et retournez vrai ou faux. Si c'est vrai, cela signifie que la mise à jour est autorisée, et faux signifie qu'il n'est pas nécessaire de mettre à jour.

Cela peut réduire les opérations de mise à jour inutiles.

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

// 如果不写默认返回true

---

Voici quelques méthodes d'optimisation des performances. Cependant, il est généralement utilisé pour les grands projets. Il n'est pas nécessaire d'utiliser l'optimisation des performances pour les projets de petite et moyenne taille. L'optimisation des performances consiste à rendre les composants dont les données modifiées sont partiellement actualisées, au lieu d'effectuer des actualisations avec des composants non pertinents.