React性能优化系列之减少props改变的实现方法


Posted in Javascript onJanuary 17, 2019

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是一个复杂的子组件且内部没有经过任何特殊的处理,那就会造成多余的渲染。对于这种情况的做法一般有两种方式:

  1. 在构造函数内绑定 this
  2. 将箭头函数赋予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使用reselect(当然也可以单独使用,不过配合redux使用简直就是前端数据管理的一大杀手锏),还有mobx的衍生概念等。这些后续会单独介绍,这里就稍微提一下。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
在js中使用&quot;with&quot;语句中跨frame的变量引用问题
Mar 08 Javascript
javascript XMLHttpRequest对象全面剖析
Apr 24 Javascript
Jsonp 关键字详解及json和jsonp的区别,ajax和jsonp的区别
Dec 30 Javascript
js获取时间精确到秒(年月日)
Mar 16 Javascript
JavaScript实现邮箱地址自动匹配功能代码
Nov 28 Javascript
Bootstrap基本组件学习笔记之面板(14)
Dec 08 Javascript
详解Angular路由 ng-route和ui-router的区别
May 22 Javascript
Node.js搭建WEB服务器的示例代码
Aug 15 Javascript
vue+element 模态框表格形式的可编辑表单实现
Jun 07 Javascript
JS中getElementsByClassName与classList兼容性问题解决方案分析
Aug 07 Javascript
layer.js open 隐藏滚动条的例子
Sep 05 Javascript
JavaScript实现雪花飘落效果
Dec 27 Javascript
vue 项目接口管理的实现
Jan 17 #Javascript
详解VUE单页应用骨架屏方案
Jan 17 #Javascript
Jquery获取radio选中值实例总结
Jan 17 #jQuery
js中call()和apply()改变指针问题的讲解
Jan 17 #Javascript
js中怎么判断两个字符串相等的实例
Jan 17 #Javascript
js中null与空字符串&quot;&quot;的区别讲解
Jan 17 #Javascript
vue中$nextTick的用法讲解
Jan 17 #Javascript
You might like
收音机发烧友应当熟知的100条知识
2021/03/02 无线电
PHP模拟SQL Server的两个日期处理函数
2006/10/09 PHP
php中根据某年第几天计算出日期年月日的代码
2011/02/24 PHP
PHP取得一个类的属性和方法的实现代码
2011/05/22 PHP
使用PHP获取当前url路径的函数以及服务器变量
2013/06/29 PHP
typecho插件编写教程(一):Hello World
2015/05/28 PHP
基于swoole实现多人聊天室
2018/06/14 PHP
Aster vs KG BO3 第二场2.19
2021/03/10 DOTA
利用js获取服务器时间的两个简单方法
2010/01/08 Javascript
javascript实现跳转菜单的具体方法
2013/07/05 Javascript
jquery获取一组checkbox的值(实例代码)
2013/11/04 Javascript
JavaScript中获取鼠标位置相关属性总结
2014/10/11 Javascript
最常见的左侧分类菜单栏jQuery实现代码
2016/11/28 Javascript
javascript 面向对象实战思想分享
2017/09/07 Javascript
详解给Vue2路由导航钩子和axios拦截器做个封装
2018/04/10 Javascript
Vue开发之封装上传文件组件与用法示例
2019/04/25 Javascript
js canvas实现5张图片合成一张图片
2019/07/15 Javascript
vue组件中实现嵌套子组件案例
2020/08/31 Javascript
JavaScript事件循环及宏任务微任务原理解析
2020/09/02 Javascript
vue实现div可拖动位置也可改变盒子大小的原理
2020/09/16 Javascript
[04:19]完美世界携手游戏风云打造 卡尔工作室模型介绍篇
2013/04/24 DOTA
python 写入csv乱码问题解决方法
2016/10/23 Python
Python中音频处理库pydub的使用教程
2017/06/07 Python
基于DataFrame筛选数据与loc的用法详解
2018/05/18 Python
Python增强赋值和共享引用注意事项小结
2019/05/28 Python
python打造爬虫代理池过程解析
2019/08/15 Python
Python字符串split及rsplit方法原理详解
2020/06/29 Python
python获取命令行参数实例方法讲解
2020/11/02 Python
美国知名的隐形眼镜电商:Contacts America
2019/11/19 全球购物
英文版银行求职信
2013/10/09 职场文书
高中生期末评语大全
2014/01/28 职场文书
学生会主席事迹材料
2014/01/28 职场文书
升学宴主持词
2014/04/02 职场文书
毕业生实习期转正自我鉴定
2014/09/26 职场文书
党员自我评价范文2015
2015/03/03 职场文书
村官个人总结范文
2015/03/03 职场文书