React性能优化系列之减小props改变

时间 2019-11-08

原文原文链接

React性能优化的一个核心点就是减小render的次数。若是你的组件没有作过特殊的处理（SCU -- shouldComponentUpdate或使用PureComponent），那每次父组件render时，子组件就会跟着一块儿被从新渲染。一般一个复杂的子组件都会进行一些优化，好比：SCU 使用PureComponent组件。对于SCU基本上进行的也都是浅比较，深比较的代价过高。javascript

对于这些被优化的子组件，咱们要减小一些没必要要的props改变：好比事件绑定。对于那些依赖于配置项的组件，咱们更是减小这些做为props的配置的变化，由于可能一但配置项发生了变化，整个组件都会跟着从新渲染，因此咱们要尽量的减小props的改变前端

事件绑定

class ClickMe extends React.Component {
    state = {
        value: '3333',
    };

    render() {
        return (
            <Button
                onClick={() => {
                    console.log('l am clicked!', this.state.value);
                }}
            >
                click me
            </Button>
        )
    }
}

相信大多数的开发者React都会指出这种写法的缺点：每次ClickMe组件渲染的时候onClick属性与上一次的值相比都是一个不一样的匿名函数，若是Button是一个复杂的子组件且内部没有通过任何特殊的处理，那就会形成多余的渲染。对于这种状况的作法通常有两种方式：java

在构造函数内绑定 this
将箭头函数赋予class的属性

class ClickMe extends React.Component {
    state = {
        value: '3333',
    };

    handleClick = () => {
        console.log('l am clicked!', this.state.value);
    };

    render() {
        return (
            <Button
                onClick={this.handleClick}
            >
                click me
            </Button>
        )
    }
}

// 或
class ClickMe extends React.Component {
    constuctor(props) {
        super(props);
        this.state = {
            value: '3333',
        };
        this.handleClick = this.handleClick.bind(this);
    }

    handleClick() {
        console.log('l am clicked!', this.state.value);
    }

    render() {
        return (
            <Button
                onClick={this.handleClick}
            >
                click me
            </Button>
        )
    }
}

批量事件绑定

那在考虑下面这种状况，涉及到子组件的批量绑定时：react

class MultiClick extends React.Component {
    dataSource = [
        { key: '1', value: '1' },
        { key: '2', value: '2' },
        { key: '3', value: '3' },
        { key: '4', value: '4' },
    ];

    handleClick = key => {
        console.error('key:', key);
    };

    render() {
        return (
            <div>
                {this.dataSource.map(item => (
                    <div
                        key={item.key}
                        onClick={() => {
                            this.handleClick(item.key);
                        }}
                    >
                        {item.value}
                    </div>
                ))}
            </div>
        );
    }
}

相似于这种须要传递参数的状况，该如何去优化？git

这个就须要咱们去作数据的缓存，即回调的缓存，上述例子以下：github

cacheMap = {};

genClickHandler = key => {
    if (!this.cacheMap[key]) {
        this.cacheMap[key] = () => {
            console.error('key:', key);
        };
    }
    return this.cacheMap[key];
};

// 绑定
<div key={item.key} onClick={this.genClickHandler(item.key)}>
    {item.value}
</div>;

若是多个基本类型的参数能够，将他们拼接成字符串做为cacheMap的key，简单的引用类型可使用JSON.stringify，不过原则上做为事件绑定的函数传递的参数简单为好。redux

做为配置的props缓存

说到数据的缓存，无论光是事件的回调，还有不少其余状况。好比表格的 columns须要根据属性变化的这种场景：缓存

class TableDemo extends React.Component {
    getColumns = () => {
        const { name } = this.state;
        return [
            {
                key: '1',
                title: `${name}_1`,
            },
            {
                key: '2',
                title: `${name}_2`,
            },
        ];
    };

    render() {
        const { dataSource } = this.props;
        return <Table dataSource={dataSource} columns={this.getColumns()} />;
    }
}

这种状况每次组件render的时候，getColumns都会被调用一次，而这个函数每次的返回值都是不同的，及时这两次的name值都相等，缘由你们能够类比[] !== []这里就不过多叙述了。性能优化

有一种作法是，将columns做为一个this.state的一个属性，在初始化和每次 this.state.name改变的时候同步改变this.state.columns的值，但若是有多个相似于this.state.name的变量控制this.state.columns的值时候，发现每一个变量变化的时候都要调用生成columns的方法，十分的烦琐易形成错误。闭包

使用缓存能够很好的解决这个问题，在参数较为复杂的时候，咱们选择只缓存上一次的值。先看代码再说：

首先咱们写一个缓存的函数

function cacheFun(cb) {
    let preResult = null
    let preParams = null
    const equalCb = cb || shallowEqual
    return (fun, params) => {
        if (preResult && equalCb(preParams, params)) {
            return preResult
        }
        preResult = fun(params)
        preParams = params
        return preResult
    }
}

这个缓存函数是一个闭包函数，保存了上一次的参数和上一次的结果，主要的实现就是比较两次的参数，相同则返回上一次结果，不一样则返回调用函数的新结果。固然对于某些特殊的状况只须要根据传入特定的某几个参数作出判断，这种状况你能够传入自定义的比较函数。先看一下上面的实现：

cacheFun函数第一个参数为选填的选项，是你比较两次参数的方法，若是你不传入则仅进行浅比较（与 React 的浅比较类似）。

返回函数的第一个参数为你的生成columns的回调，params 为你须要的变量，若是你的变量比较多，你能够将他们做为一个对象传入；那么代码就相似以下：

const params = { name, time, handler };
cacheFun(this.getColumns, params, cb);

在类中的使用为：

class TableDemo extends React.Component {
    getColumns = name => {
        return [
            {
                key: '1',
                title: `${name}_1`,
            },
            {
                key: '2',
                title: `${name}_2`,
            },
        ];
    };

    getColumnsWrapper = () => {
        const { name } = this.state;
        return cacheFun()(this.getColumns, name);
    };

    render() {
        const { dataSource } = this.props;
        return (
            <Table dataSource={dataSource} columns={this.getColumnsWrapper()} />
        );
    }
}

假如你不喜欢对象的传值方式，那你能够对这个缓存函数进行更改：

function cacheFun(cb) {
    let preResult = null;
    let preParams = null;
    const equalCb = cb || shallowEqual;
    return (fun, ...params) => {
        if (preResult) {
            const isEqual = params.ervey((param, i) => {
                const preParam = preParams && preParams[i];
                return equalCb(param, preParam);
            });
            if (isEqual) {
                return preResult;
            }
        }
        preResult = fun(params);
        preParams = params;
        return preResult;
    };
}

你这能够这样使用：

cacheFun()(this.getColumns, name, key, param1, params2);
// 或者
cacheFun()(this.getColumns, name, key, { param1, params2 });

这样配置也就被缓存优化了，当TableDemo组件因非name属性render时，这时候你的columns仍是返回上一次缓存的值，是的Table这个组件减小了一次因columns引用不一样产生的render。若是Table的dataSource数据量很大，那此次对应用的优化就很可观了。

数据的缓存

数据的缓存在原生的内部也有使用cacheFun的场景，如对于一个list 根据 searchStr模糊过滤对于的subList。

大体代码以下：

class SearchList extends React.Component {
    
    state = {
        list: [
            { value: '1', key: '1' },
            { value: '11', key: '11' },
            { value: '111', key: '111' },
            { value: '2', key: '2' },
            { value: '22', key: '22' },
            { value: '222', key: '222' },
            { value: '2222', key: '2222' },
        ],
        searchStr: '',
    }

    // ...

    render() {
        const { searchStr, list } = this.state
        const dataSource = list.filter(it => it.indexOf(searchStr) > -1)
        return (
            <div>
                <Input onChange={this.handleChange} />
                <List dataSource={dataSource} />
            </div>
        )
    }
}

对于此情景的优化使用cacheFun也能够实现

const dataSource = cacheFun()((plist, pSearchStr) => {
    return plist.filter(it => it.indexOf(pSearchStr) > -1)
}, list, searchStr)

可是有大量的相似于此的衍生值的时候，这样的写法又显得不够。社区上出现了许多框架如配合react-redux使用reselect（固然也能够单独使用，不过配合redux使用简直就是前端数据管理的一大杀手锏），还有mobx的衍生概念等。这些后续会单独介绍，这里就稍微提一下。