更新数组中的1个元素是否会触发React中对数组中其他元素的渲染
Does updating 1 element in an array trigger a render in React for other elements in array?
我当前的项目使用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
相关文章:
- 在函数中添加数组元素的数值
- 访问JSON对象内部的数组元素
- 用于检查数组中是否存在元素的javascript自定义方法
- 在数组中的一个元素上设置多个值
- 从组件状态的数组中删除元素
- Mongoose-在更新中删除数组元素
- 从数组中删除元素的最佳方法是:javascript/jquery
- 数组中元素(字符串)的总和
- javascript数组元素是否知道其封闭数组
- 查找数组javascript中包含的元素类型
- 如何在javascript上向数组的对象添加新元素
- 如果数组仍在执行,async.forEach()将运行我添加到数组中的新元素
- 使用filter和map方法将数组中某些元素的第一个字母大写-JavaScript
- 一些元素没有从数组中删除
- JS.循环遍历多维数组,以计数元素在每列中的出现次数
- 将数组元素附加到FormData dos'不适用于Firefox 15
- 元素不会添加到Javascript数组中
- 如何从另一个带下划线的数组中筛选带元素的数组
- 如何将函数应用于两个数组的第 n 个元素(数组的数组)
- Js接受两个值之间的元素(数组)