提前终止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     }

转载于:https://www.cnblogs.com/js123/p/11021629.html