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