javascript - 即使在获取数据后，React 组件的 render 方法也会调用两次

Question

ListFolders 是一个 React 组件。并将“folders”数据属性从 MainLayout 组件传递到此组件。

MainLayout 组件使用 redux connect 并获取“文件夹”。

这里，我的问题在ListFolders中，列出文件夹时有一些映射和计算。因此，因为第二次调用需要更多时间，这是一个重要的性能问题。

下面的基本示例。我正在使用 redux-saga 和 immutable.js。我正在获取name (ContainerDesc)、id (IdEncrypted)、haveChildFolders和childFolders。

Here, it enters inside if (folders !== undefined) { ... code block twice.

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

对于第二次调用，文件夹数据可能没有更改，也可能不是未定义，因此请在 componentWillReceiveProps() 中添加一个条件来检查文件夹数据是否已更改，例如:

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

或者您可以添加条件 shouldComponentUpdate() 并在不满足条件时停止组件更新

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