Study notes-performance optimization in react

---

To optimize the performance of the react project, the most important thing is to reduce the number of renders and achieve partial updates of components.

1.React.memo()：

The React.memo() function is mainly used to compare the values in the props in the "function component" to determine whether the component needs to be re-rendered. Dedicated to functional components, need to consume performance.

Usage: It is only used when the rendered function component is expected to be relatively large and there will be a lot of meaningless re-rendering.

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

 The React.memo() function can also compare the values in the context of the function component to determine whether it needs to be re-rendered. 

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.PureComponent class:

PureComponent is mainly used for class components. When a component is created, it inherits PureComponent. The render update of the component will be optimized.

Its essence is to determine whether the props data has changed in the shouldComponentUpdate of the class component. If there is no change, no update is made, unnecessary renders are reduced, and performance is improved.

import React, {PureComponent} from 'react';

class Child extends PureComponent {}

3.shouldComponentUpdate()函数：

This function is mainly used to optimize render performance.

Write appropriate logic in the function and return true or false. If it is true, it means that the update is allowed, and false means that it is not necessary to update.

This can reduce unnecessary update operations.

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

// 如果不写默认返回true

---

The above are some performance optimization methods. However, it is generally used for large projects. There is no need to use performance optimization for small and medium-sized projects. Performance optimization is to make the components whose data changes are partially refreshed, instead of performing refreshes with irrelevant components.