提前终止forEach技巧,使用try catch

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

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

 // 生命周期 只有当前后数据不一致时才渲染
     shouldComponentUpdate(nextProps,nextState){
         var newProducts = nextProps.products;
         var beforeProducts = this.props.products
         var isRender = false;

         if(newProducts.length===beforeProducts.length){
             try{
                 newProducts.forEach((data,index)=>{
                     if(data.name!==beforeProducts[index].name){
                         isRender = true;
                         throw Error('need to render')
                     }
                 })
             }catch(err){

             }
         }else{
             isRender = true
         }
         return isRender  // true or false
     }

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

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

 // 生命周期 只有当前后数据不一致时才渲染
     shouldComponentUpdate(nextProps,nextState){
         var newProducts = nextProps.products;
         var beforeProducts = this.props.products
         var isRender = false;

         if(newProducts.length===beforeProducts.length){
                 for(var i=0;i<newProducts.length;i++){
                     if(newProducts[i].name!==beforeProducts[i].name){
                         isRender = true
                         break;
                     }
                 }
         }else{
             isRender = true
         }
         return isRender  // true or false　　　　　　　　
     }