Estude notas de otimização de desempenho em reação

---

Para otimizar o desempenho do projeto de reação, o mais importante é reduzir o número de renderizações e obter atualizações parciais dos componentes.

1.React.memo () ：

A função React.memo () é usada principalmente para comparar os valores nos adereços no "componente de função" para determinar se o componente precisa ser renderizado novamente. Dedicado a componentes funcionais, precisa consumir desempenho.

Uso: Só é usado quando se espera que o componente da função renderizada seja relativamente grande e haverá muitas re-renderizações sem sentido.

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

 A função React.memo () também pode comparar os valores no contexto do componente da função para determinar se ele precisa ser renderizado novamente. 

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

2. Classe PureComponent:

PureComponent é usado principalmente para componentes de classe. Quando um componente é criado, ele herda PureComponent. A atualização de renderização do componente será otimizada.

Sua essência é determinar se os dados de adereços foram alterados no shouldComponentUpdate do componente de classe. Se não houver alteração, nenhuma atualização será feita, as renderizações desnecessárias serão reduzidas e o desempenho será aprimorado.

import React, {PureComponent} from 'react';

class Child extends PureComponent {}

3.shouldComponentUpdate () 函数:

Esta função é usada principalmente para otimizar o desempenho de renderização.

Escreva a lógica apropriada na função e retorne verdadeiro ou falso. Se for verdadeiro, significa que a atualização é permitida e falso significa que não é necessário atualizar.

Isso pode reduzir as operações de atualização desnecessárias.

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

// 如果不写默认返回true

---

Acima estão alguns métodos de otimização de desempenho. No entanto, geralmente é usado para grandes projetos. Não há necessidade de usar a otimização de desempenho para projetos de pequeno e médio porte. A otimização de desempenho consiste em fazer com que os componentes cujas alterações de dados sejam parcialmente atualizados, em vez de realizar atualizações com componentes irrelevantes.