提前终止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     }
复制代码
posted @   wxh27  阅读(1604)  评论(0编辑  收藏  举报
努力加载评论中...
点击右上角即可分享
微信分享提示