javascript - 更新数组中的 1 个元素会触发 React 中其他元素的渲染吗？

Question

我正在为我当前的项目使用 React 和 Redux。

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

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

假设 valueFour 是一个对象数组。我使用 valueFour 数组来 map 一堆 React 元素，就像在 render 方法中一样:

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

(显然以上是简化的，但我想说明的是我正在渲染一堆元素)

现在，我只想更新上述元素中的一个。在我的 action/reducer 代码中，我返回整个 valueFour 数组，并在函数中更新了 1 个元素，如下所示:

Action 代码

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

reducer 代码:

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

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

我希望这一切都有意义。如果不明白，请询问，我会澄清。

但我的问题是，由于 keyFour 对 entireArray 进行了技术更新，这是否意味着我的所有元素都会更新，即使只有 1 个元素有新数据？如果是这样，是否有更有效的方法来实现我目前正在做的事情？

Answer 1

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

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