即使在获取数据后,React Component的render方法也会被调用两次

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了即使在获取数据后,React Component的render方法也会被调用两次相关的知识,希望对你有一定的参考价值。

ListFolders是一个React组件。并且“文件夹”数据支持从MainLayout组件传递给此组件。

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

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

以下基本示例。我正在使用redux-sagaimmutable.js。我得到name (ContainerDesc)id (IdEncrypted)haveChildFolderschildFolders

在这里,它进入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>
    );
}
答案

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

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

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

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

我发现ListFolders被叫两次的原因。我在ListFoldersSidebarComponent中使用Sidebar我使用了材料-ui hidden助手用于桌面和移动菜单。示例代码如下。

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

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

因为ListFolders甚至多次渲染数据。我会用纯css处理移动菜单。

以上是关于即使在获取数据后,React Component的render方法也会被调用两次的主要内容,如果未能解决你的问题,请参考以下文章

ReferenceError:在初始化React Collapse Component之前无法访问词法声明'useStyles',axios获取数据材料ui useStyles

React Router v4根据params获取数据

[React 进阶系列] Functional Component 与 Class Component 中使用 Context

[React 进阶系列] Functional Component 与 Class Component 中使用 Context

[React 进阶系列] Functional Component 与 Class Component 中使用 Context

react类组件优化