经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置：技术经验 » JS/JS库/框架 » React » 查看文章
React性能优化系列之减少props改变的实现方法
来源：jb51　　时间：2019/1/18 9:10:21　　对本文有异议

React性能优化的一个核心点就是减少render的次数。如果你的组件没有做过特殊的处理（SCU -- shouldComponentUpdate或使用PureComponent），那每次父组件render时，子组件就会跟着一起被重新渲染。通常一个复杂的子组件都会进行一些优化，比如：SCU 使用PureComponent组件。对于SCU基本上进行的也都是浅比较，深比较的代价太高。

对于这些被优化的子组件，我们要减少一些不必要的props改变：比如事件绑定。对于那些依赖于配置项的组件，我们更是减少这些作为props的配置的变化，因为可能一但配置项发生了变化，整个组件都会跟着重新渲染，所以我们要尽可能的减少props的改变

事件绑定

  1. class ClickMe extends React.Component {
  2.   state = {
  3.     value: '3333',
  4.   };
  5.  
  6.   render() {
  7.     return (
  8.       <Button
  9.         onClick={() => {
  10.           console.log('l am clicked!', this.state.value);
  11.         }}
  12.       >
  13.         click me
  14.       </Button>
  15.     )
  16.   }
  17. }
  18.  

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

  1. 在构造函数内绑定 this
  2. 将箭头函数赋予class的属性
  1. class ClickMe extends React.Component {
  2.   state = {
  3.     value: '3333',
  4.   };
  5.  
  6.   handleClick = () => {
  7.     console.log('l am clicked!', this.state.value);
  8.   };
  9.  
  10.   render() {
  11.     return (
  12.       <Button
  13.         onClick={this.handleClick}
  14.       >
  15.         click me
  16.       </Button>
  17.     )
  18.   }
  19. }
  20.  
  21. // 或
  22. class ClickMe extends React.Component {
  23.   constuctor(props) {
  24.     super(props);
  25.     this.state = {
  26.       value: '3333',
  27.     };
  28.     this.handleClick = this.handleClick.bind(this);
  29.   }
  30.  
  31.   handleClick() {
  32.     console.log('l am clicked!', this.state.value);
  33.   }
  34.  
  35.   render() {
  36.     return (
  37.       <Button
  38.         onClick={this.handleClick}
  39.       >
  40.         click me
  41.       </Button>
  42.     )
  43.   }
  44. }
  45.  

批量事件绑定

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

  1. class MultiClick extends React.Component {
  2.   dataSource = [
  3.     { key: '1', value: '1' },
  4.     { key: '2', value: '2' },
  5.     { key: '3', value: '3' },
  6.     { key: '4', value: '4' },
  7.   ];
  8.  
  9.   handleClick = key => {
  10.     console.error('key:', key);
  11.   };
  12.  
  13.   render() {
  14.     return (
  15.       <div>
  16.         {this.dataSource.map(item => (
  17.           <div
  18.             key={item.key}
  19.             onClick={() => {
  20.               this.handleClick(item.key);
  21.             }}
  22.           >
  23.             {item.value}
  24.           </div>
  25.         ))}
  26.       </div>
  27.     );
  28.   }
  29. }

类似于这种需要传递参数的情况，该如何去优化？

这个就需要我们去做数据的缓存，即回调的缓存，上述例子如下：

  1. cacheMap = {};
  2.  
  3. genClickHandler = key => {
  4.   if (!this.cacheMap[key]) {
  5.     this.cacheMap[key] = () => {
  6.       console.error('key:', key);
  7.     };
  8.   }
  9.   return this.cacheMap[key];
  10. };
  11.  
  12. // 绑定
  13. <div key={item.key} onClick={this.genClickHandler(item.key)}>
  14.   {item.value}
  15. </div>;
  16.  

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

作为配置的props缓存

说到数据的缓存，不管光是事件的回调，还有很多 其他情况。比如表格的 columns需要根据属性变化的这种场景：

  1. class TableDemo extends React.Component {
  2.   getColumns = () => {
  3.     const { name } = this.state;
  4.     return [
  5.       {
  6.         key: '1',
  7.         title: `${name}_1`,
  8.       },
  9.       {
  10.         key: '2',
  11.         title: `${name}_2`,
  12.       },
  13.     ];
  14.   };
  15.  
  16.   render() {
  17.     const { dataSource } = this.props;
  18.     return <Table dataSource={dataSource} columns={this.getColumns()} />;
  19.   }
  20. }
  21.  

这种情况每次组件render的时候，getColumns都会被调用一次，而这个函数每次的返回值都是不一样的 ，及时这两次的name值都相等，原因大家可以类比[] !== []这里就不过多叙述了。

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

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

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

  1. function cacheFun(cb) {
  2.   let preResult = null
  3.   let preParams = null
  4.   const equalCb = cb || shallowEqual
  5.   return (fun, params) => {
  6.     if (preResult && equalCb(preParams, params)) {
  7.       return preResult
  8.     }
  9.     preResult = fun(params)
  10.     preParams = params
  11.     return preResult
  12.   }
  13. }

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

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

返回函数的第一个参数为你的 生成columns的回调，params 为你需要的 变量，如果你的变量比较多，你可以将他们 作为一个对象传入；那么代码就类似如下：

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

在类中的使用为：

  1. class TableDemo extends React.Component {
  2.   getColumns = name => {
  3.     return [
  4.       {
  5.         key: '1',
  6.         title: `${name}_1`,
  7.       },
  8.       {
  9.         key: '2',
  10.         title: `${name}_2`,
  11.       },
  12.     ];
  13.   };
  14.  
  15.   getColumnsWrapper = () => {
  16.     const { name } = this.state;
  17.     return cacheFun()(this.getColumns, name);
  18.   };
  19.  
  20.   render() {
  21.     const { dataSource } = this.props;
  22.     return (
  23.       <Table dataSource={dataSource} columns={this.getColumnsWrapper()} />
  24.     );
  25.   }
  26. }

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

  1. function cacheFun(cb) {
  2.   let preResult = null;
  3.   let preParams = null;
  4.   const equalCb = cb || shallowEqual;
  5.   return (fun, ...params) => {
  6.     if (preResult) {
  7.       const isEqual = params.ervey((param, i) => {
  8.         const preParam = preParams && preParams[i];
  9.         return equalCb(param, preParam);
  10.       });
  11.       if (isEqual) {
  12.         return preResult;
  13.       }
  14.     }
  15.     preResult = fun(params);
  16.     preParams = params;
  17.     return preResult;
  18.   };
  19. }

你这可以这样使用：

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

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

数据的缓存

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

大致代码如下：

  1. class SearchList extends React.Component {
  2.   
  3.   state = {
  4.     list: [
  5.       { value: '1', key: '1' },
  6.       { value: '11', key: '11' },
  7.       { value: '111', key: '111' },
  8.       { value: '2', key: '2' },
  9.       { value: '22', key: '22' },
  10.       { value: '222', key: '222' },
  11.       { value: '2222', key: '2222' },
  12.     ],
  13.     searchStr: '',
  14.   }
  15.  
  16.   // ...
  17.  
  18.   render() {
  19.     const { searchStr, list } = this.state
  20.     const dataSource = list.filter(it => it.indexOf(searchStr) > -1)
  21.     return (
  22.       <div>
  23.         <Input onChange={this.handleChange} />
  24.         <List dataSource={dataSource} />
  25.       </div>
  26.     )
  27.   }
  28. }
  29.  

对于此情景的优化使用cacheFun也可以实现

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

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持w3xue。

 友情链接：直通硅谷 　点职佳 　北美留学生论坛

React热门文章

  • React报错解决之ref返回undefined或null
  • 使用react-beautiful-dnd实现列表间拖拽踩坑
  • 理解 React 中的 useEffect、useMemo 与 useCallback
  • React antd tabs切换造成子组件重复刷新
  • vue3+ts中ref与reactive指定类型实现示例
  • 基于React.js实现简单的文字跑马灯效果
  • 深入解析React DnD拖拽原理，轻松掌握拖放技巧！
  • react实现全局组件确认弹窗
  • React使用高德地图的实现示例(react-amap)
  • react 高效高质量搭建后台系统 系列 —— 表格的封装

    • React推荐文章

  • Antd-React-TreeSelect前端搜索过滤
  • React组件封装：文字、表情评论框
  • Taro：高性能小程序的最佳实践
  • Netty源码学习4——服务端是处理新连接的&netty的reactor模式
  • 关于 React 性能优化和数栈产品中的实践
  • 【Vue3响应式入门#01】Reactivity
  • React跨路由组件动画
  • Vue vs React：你需要知道的一切
  • 为react项目添加开发/提交规范（前端工程化、eslint、prettier、husky、commitlint、stylelint）
  • react18 hooks自定义移动端Popup弹窗组件RcPop

    • 本站QQ群：前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

    W3xue 的所有内容仅供测试，对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
    关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接（目前9元/月）请联系QQ：27243702 沸活量
    皖ICP备17017327号-2　皖公网安备34020702000426号