我有一个list
对象处于还原状态。它具有如下所示的byId集:
{
root: {
id: 'root',
children: ['item_1', 'item_2'],
data: 'Root String',
parent: null,
},
item_1: {
id: 'item_1',
children: ['item_1_1', 'item_1_2', 'item_1_3'],
data: 'Some String',
parent: 'root',
},
item_1_1:
{
id: 'item_1_1'
children: ['item_1_1_1', 'item_1_1_2']
data: 'Some Other string',
parent: 'item_1',
},
item_2: {
...
}
...
}
现在,我将上述列表呈现如下:
recursiveRender = (component, idx = 0) => {
const { data, children } = component;
const { list } = this.props;
return (
<div key={idx}>
{
children.map((child, childIdx) =>
this.recursiveRender(list[child], childIdx))
}
</div>
);
};
render() {
const { list } = this.props;
return this.recursiveRender(list.root);
}
我想更新item_1
的子级的顺序。
我在redux操作中执行以下操作:
import update from 'immutability-helper';
...
...
return update(state,
{
list: {
[parent]: {
children: {
$splice: [[oldIdx, 1], [idx, 0, id]] },
},
},
}
});
有效。
我在React Dev Tools中注意到,递归渲染的组件的每个(item_2
和item_3
也都被重新绘制了)。我不知道为什么。我确保list
是不变的,但是每次都再次渲染整个树。如何确定item_1
的更改部分(此处为list
)才重新粉刷?
我不认为使用reselect
是这里的解决方案,因为列表 确实在变化。
那么,我应该有一个动态的mapStateToProps
吗?如果是这样,如何不更改依赖于list
的其他列表项?还是我看错地方了,问题可能出在应用程序的其他地方。
答案 0 :(得分:0)
无状态功能组件在旧道具和新道具之间不做任何比较。一种简单的解决方案是改为将RecursiveRender
用作root.myfunc()
root.submodule.another_func()
。