React性能优化系列之减少props改变的实现方法
react性能优化的一个核心点就是减少render的次数。如果你的组件没有做过特殊的处理（scu -- shouldcomponentupdate或使用purecomponent），那每次父组件render时，子组件就会跟着一起被重新渲染。通常一个复杂的子组件都会进行一些优化，比如：scu 使用purecomponent组件。对于scu基本上进行的也都是浅比较，深比较的代价太高。
对于这些被优化的子组件，我们要减少一些不必要的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是一个复杂的子组件且内部没有经过任何特殊的处理，那就会造成多余的渲染。对于这种情况的做法一般有两种方式：
- 在构造函数内绑定 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>
)
}
}
批量事件绑定
那在考虑下面这种情况，涉及到子组件的批量绑定时：
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>
);
}
}
类似于这种需要传递参数的情况，该如何去优化？
这个就需要我们去做数据的缓存，即回调的缓存，上述例子如下：
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，不过原则上作为事件绑定的函数 传递的参数简单为好。
作为配置的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使用（当然也可以单独使用，不过配合redux使用简直就是前端数据管理的一大杀手锏），还有的衍生概念等。这些后续会单独介绍，这里就稍微提一下。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。