Рендеринг с рекурсией для вложенного списка в React - как избежать ненужных обновлений? - PullRequest
Новая
       15

Рендеринг с рекурсией для вложенного списка в React - как избежать ненужных обновлений?

0 голосов
/ 27 октября 2018

У меня есть 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: {
        ...
    }
    ...
}

Теперь я отображаю приведенный выше список следующим образом:

render () 

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

ReduxРедуктор

Я хочу обновить порядок дочерних элементов, скажем, item_1.

Я выполняю в своем действии редукса следующее: 

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?Или я смотрю в неправильном месте, и проблема может быть в другом месте приложения.

1 Ответ

0 голосов
/ 27 октября 2018

Функциональные компоненты без сохранения состояния не проводят никакого сравнения между предыдущим и новым реквизитом.Простым решением было бы использовать PureComponent вместо RecursiveRender.

...