javascript – 更新数组中的1个元素是否会在React中为数组中的其他元素触发渲染？

2023年4月10日 247次阅读

我正在使用React和Redux来完成我当前的项目.

我有一个像这样的状态对象：

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

假设valueFour是一个对象数组.我使用valueFour数组在render方法中映射一堆React元素：

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

(显然以上是简化的,但我想表明的是我渲染了一堆元素)

现在,我想只更新上述元素中的一个.在我的action / reducer代码中,我返回整个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:{}
})

(我的reducer代码使用库redux-actions)

我希望这一切都有道理.如果没有请问,我会澄清.

但我的问题是,因为keyFour在整个技术上更新了整个阵列,这是否意味着所有我的元素都会更新,即使只有1个有新数据？如果是这样,有没有更有效的方式来实现我目前正在做的事情？

最佳答案 将再次调用render方法,这意味着它将再次映射该数组.您可以查看chrome中的元素选项卡,您可以看到闪烁的html,它是更改的部分.如果组件具有相同的数据和相同的键,则不会更改实际的html,但会在子项中调用render方法.

编辑：没有意识到你正在更新嵌套密钥,React只检查浅平等：https://facebook.github.io/react/docs/shallow-compare.html

点赞