学习笔记——react中的性能优化

---

对react项目进行性能优化，其最主要的就是要减少render次数，实现组件局部更新。

1.React.memo()：

React.memo()函数主要用来对“函数组件”中的props中的值进行比较，进而决定是否需要重新渲染组件。专用于函数组件，需要消耗性能。

使用情况：预期到渲染的函数组件比较大时，且会出现大量无意义的重新渲染时，才使用。

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

 React.memo()函数也可以对函数组件中context中的值进行比较，进而决定是否需要重新渲染。 

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类：

PureComponent主要用于类组件，组件在创建时，继承PureComponent。就会对该组件的render更新进行优化。

其本质是在类组件的shouldComponentUpdate中判断props数据是否发生变化。如果无改变，就不更新，减少不必要的render，提高性能。

import React, {PureComponent} from 'react';

class Child extends PureComponent {}

3.shouldComponentUpdate()函数：

该函数主要用来进行render性能优化。

在函数中书写适合的逻辑，并返回true或false。如果是true表示允许更新，false表示没有必要更新。

这就可以减少不必要的更新操作。

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

// 如果不写默认返回true

---

以上就是一些性能优化的方法。不过一般用于大型项目。中小型项目没有必要使用性能优化。性能优化就是要让数据改变的组件局部刷新，不要连带着无关的组件执行刷新。