zoukankan      html  css  js  c++  java
  • 提前终止forEach技巧,使用try catch

    学习react优化性能的时候,在render之前,生命周期shouldComponentUpdate里判断前后两次数据是否一致,使用了forEach嵌套if语句,如果满足条件想直接break跳出forEach循环,但事实并没有想的那么简单,代码直接抛出异常。查阅资料原来:

    接着想了个一个可以实现的办法,具体代码如下:

     1 // 生命周期 只有当前后数据不一致时才渲染
     2     shouldComponentUpdate(nextProps,nextState){
     3         var newProducts = nextProps.products;
     4         var beforeProducts = this.props.products
     5         var isRender = false;
     6 
     7         if(newProducts.length===beforeProducts.length){
     8             try{
     9                 newProducts.forEach((data,index)=>{
    10                     if(data.name!==beforeProducts[index].name){
    11                         isRender = true;
    12                         throw Error('need to render')
    13                     }
    14                 })
    15             }catch(err){
    16 
    17             }
    18         }else{
    19             isRender = true
    20         }
    21         return isRender  // true or false
    22     }

    配合使用try catch,满足条件时throw一个错误来跳出循环。

    但实际上这里使用for循环配合break足矣,如下:

     1 // 生命周期 只有当前后数据不一致时才渲染
     2     shouldComponentUpdate(nextProps,nextState){
     3         var newProducts = nextProps.products;
     4         var beforeProducts = this.props.products
     5         var isRender = false;
     6 
     7         if(newProducts.length===beforeProducts.length){
     8                 for(var i=0;i<newProducts.length;i++){
     9                     if(newProducts[i].name!==beforeProducts[i].name){
    10                         isRender = true
    11                         break;
    12                     }
    13                 }
    14         }else{
    15             isRender = true
    16         }
    17         return isRender  // true or false        
    18     }
  • 相关阅读:
    python学习Day21--内置函数、反射
    python学习Day20--属性、类方法和静态方法+类多继承算法补充
    python学习Day19--面向对象的三大特性
    python学习Day18--继承
    python学习Day17--名称空间
    python学习Day16--面向对象
    python学习Day15--递归与二分查找
    python学习Day14--内置函数
    c# 深克隆与浅克隆
    css test-align 和 margin 居中什么区别
  • 原文地址:https://www.cnblogs.com/js123/p/11021629.html
Copyright © 2011-2022 走看看