React中嵌套列表的递归呈现-如何避免不必要的更新?

我有一个 list 对象处于我的redux状态。它有一个如下的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

在我的重做行动中,我会执行以下操作:

import update from 'immutability-helper';
...
...
return update(state,
    {
        list: {
            [parent]: {
                children: {
                    $splice: [[oldIdx, 1], [idx, 0, id]] },
                },
        },
    }
});

确实有效。

我在React Dev工具中注意到 ( item_2 item_3 也会重新绘制。我不知道为什么。我要确保 列表 是不可变的,但每次都会再次渲染整个树。我怎样才能确保只更改了部分( 这里)的 是否重新喷漆?

我不认为使用 reselect 从列表中可以看出解决方案吗 是

那么,我应该有一个动态吗 mapStateToProps 列表