更新数组中的1个元素是否会触发React中对数组中其他元素的渲染

Does updating 1 element in an array trigger a render in React for other elements in array?

本文关键字:元素 数组 其他 React 1个 是否 更新      更新时间:2023-09-26

我当前的项目使用React with Redux。

我有一个这样的状态对象:

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

假设valueFour是一个对象数组。我使用valueFour数组来map渲染方法中的一堆React元素:

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:{}
})

(我的reducer代码使用库redux操作)

我希望这一切都有意义。如果没有,请询问,我会澄清。

但我的问题是,既然keyFour在技术上更新了entireArray,这是否意味着即使只有1有新数据,我的所有元素都会更新?如果是的话,有没有更有效的方法来实现我目前正在做的事情?

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

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