2016-01-08 28 views
4

我在當前項目中使用React和Redux。更新數組中的1個元素是否觸發了React中數組中其他元素的渲染?

我有像這樣的狀態下對象:

state: { 
    reducerOne: { 
     keyOne: valueOne, 
     keyTwo: valueTwo 
    } 
    reducerTwo: { 
     keyThree: valueThree 
     keyFour: valueFour 
    } 
} 

假設valueFour是對象的數組。我用valueFour陣列map一束反應的元素的,像這樣在渲染方法:

this.props.valueFour.map(()=> <div/>) 

(顯然上述被簡化,但所有我試圖以指示是,我呈現一串要素)

現在,我想只更新上述元素中的一個。在我的動作/減速的代碼,我返回整個valueFour陣列與1元的功能更新,像這樣:

動作代碼

export function updateThingInArray(elementId){ 
    return (dispatch, getState) => { 
     const myArray = getState().reducerTwo.keyFour 
     for (let i=0; i < myArray.length; i++) { 
      if (myArray[i].id === elementId){ 
       const result= [ 
        ...myArray.slice(0,i), 
        Object.assign({}, 
         myArray[i], 
         {field:newValue}), 
        ...myArray.slice(i+1) 
       ] 
       dispatch(update(result)) 
      } 
     } 
    } 
} 

減速代碼:

export default handleActions({ 
    [UPDATE]: (state,{payload}) => Object.assign({},state, {keyFour: payload}) 
},{ 
    keyThree:{}, 
    keyFour:{} 
}) 

(我減速碼使用庫redux-actions)

我希望所有這些都有道理。如果它不請,我會澄清。

但我的問題是,因爲keyFour有技術更新的整個數組,這是否意味着所有我的元素將更新,即使只有1有新的數據?如果是這樣,是否有更有效的方式來實現我目前正在做的事情?

回答

2

將再次調用render方法,這意味着它將再次映射該數組。您可以查看Chrome中的元素選項卡,並且可以看到閃爍的html,它是更改的部分。如果組件具有相同的數據和相同的關鍵字,則實際的html將不會更改,但render方法將在子項中調用。

編輯:沒有意識到你正在更新一個嵌套鍵,React只檢查淺等於:https://facebook.github.io/react/docs/shallow-compare.html

相關問題