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