Реактивный метод рендеринга компонента вызывается дважды даже после извлечения данных

Question

ListFolders является компонентом React.И " папки " данных, передаваемых этому компоненту из MainLayout компонента.

MainLayout использует приставку connect иполучает " folder ".

Здесь моя проблема внутри ListFolders, при выводе списка папок есть некоторые сопоставления и вычисления.Так как второй вызов занимает больше времени, и это важный вопрос производительности.

Основной пример ниже.Я использую redux-saga и immutable.js.Я получаю name (ContainerDesc), id (IdEncrypted), haveChildFolders и childFolders.

Здесь он дважды входит в if (folders !== undefined) { ... кодовый блок.

render() {
    const { classes, folders } = this.props;

    let reactListItems = [];
    if (folders !== undefined) {

        var iterator1 = folders[Symbol.iterator]();

        for (let item of iterator1) {

            reactListItems.push({ 
                'name': item.get('ContainerDesc'), 
                'id': item.get('IdEncrypted'),
                'haveChildFolders' : item.get('ChildContainers').size > 0,
                'childFolders': item.get('ChildContainers')
            })

        }
    }

    return (
        <List classes={{ root: classes.list, }}>
            ...
        </List>
    );
}

Answer 1

Я нашел причину звонка ListFolders дважды.Я использую ListFolders внутри SidebarComponent и в Sidebar я использовал помощник material-ui hidden для настольных и мобильных меню.Пример кода ниже.

<Hidden mdUp implementation="css">
   ...
   <Drawer variant="temporary" ... /* Sidebar Drawer */
</Hidden>

<Hidden smDown implementation="css">
   ...
   <Drawer variant="temporary" ... /* Sidebar Drawer */
</Hidden>

Из-за этого ListFolders рендерит несколько раз даже выбранные данные.Я буду обрабатывать мобильное меню с чистым CSS, я думаю.

Answer 2

Для второго вызова данные папок, возможно, не изменились и не могут быть неопределенными, поэтому добавьте еще одно условие, которое проверяет, изменились или нет данные папок в componentWillReceiveProps (), что-то вроде:

componentWillReceiveProps(nextProps){    
     if (folders.length !== nextProps.folders.length) {
       return ...
    }
}

Или выможет добавить условие shouldComponentUpdate () и остановить компонент для обновления, если условие не выполняется

shouldComponentUpdate(nextProps){    
         if (folders.length !== nextProps.folders.length) {
           return true
        }
        else{
          return false
        }
    }