时间戳

首页 > 解决方案 > 什么可能导致 React Native 组件不断地卸载和重新安装？

reactjs - 什么可能导致 React Native 组件不断地卸载和重新安装？

问题描述

我有一个组件呈现一个子组件，当它从另一个组件中调用时，它会不断卸载并重新安装。我不明白为什么会这样。

代码大致如下：

import React, { useState } from 'react';
import { View } from 'react-native';
import EditLayout from './EditLayout'

export default users = (props) => {
    let { user } = props
    const [layout, setLayout] = useState([])
    const [layout, setLayout] = useState([])
    const Header = () => {
      return (<View>
                    <EditLayout layout={layout} user={user}  />
              </View>
      )
    }
    
    return (
      <View style={{ flex: 1 }}>
            {/* <EditLayout layout={layout} user={user}  /> */}
            <Header />
      </View>
    );
  }

并且这会导致 EditLayout 的许多重新渲染（EditLayout 非常小）。

当我将上面注释掉的代码替换为 {/* <EditLayout ... /> /} 以改为 {/ */} 时，重新安装就会消失。似乎由于某种原因在 Header 中调用时，它会在最终稳定下来之前导致许多 un & remounts。

知道可能是什么原因造成的吗？

编辑：EditLayout 和输出

这是相关的 EditLayout 代码，即使只有下面的代码，我也可以复制该问题（因此它似乎与 EditLayout 代码的其余部分无关）。

在这里，我将 checkStateData 设置为默认的“Mounted Edit Layout”并立即将其更改为 false，仅在它为 true 时打印。

export default EditLayout = (props) => {
    const [checkStateData, setCheckStateData] = useState("Mounted Edit Layout")

    checkStateData && console.log("*****", checkStateData) // Print the current status 

    useEffect(() => {
      if(setCheckStateData){
        console.log("Made it here")
        setCheckStateData(false)
      }
    }, [])
    
    return (
      <View style={{ flex: 1 }}>
            {/* {headerLayoutData && headerLayoutData.map((card, i) => {
                          if (card && user){
                            return <Card card={card} key={i} user={user} />
                          }
                        })}
          {newCards && newCards.map((card, i) => {
              return <NewCard key={i} user={user} />
          })} */}
    
      </View>
    );
  }

Via <Header />

[Tue Feb 23 2021 15:43:11.836]  LOG      ***** Mounted Edit Layout
[Tue Feb 23 2021 15:43:11.853]  LOG      Made it here
[Tue Feb 23 2021 15:43:12.127]  LOG      ***** Mounted Edit Layout
[Tue Feb 23 2021 15:43:12.172]  LOG      Made it here
[Tue Feb 23 2021 15:43:12.179]  LOG      ***** Mounted Edit Layout
[Tue Feb 23 2021 15:43:12.259]  LOG      Made it here
[Tue Feb 23 2021 15:43:12.281]  LOG      ***** Mounted Edit Layout
[Tue Feb 23 2021 15:43:12.300]  LOG      Made it here
[Tue Feb 23 2021 15:43:12.303]  LOG      ***** Mounted Edit Layout
[Tue Feb 23 2021 15:43:12.307]  LOG      Made it here
[Tue Feb 23 2021 15:43:12.309]  LOG      ***** Mounted Edit Layout
[Tue Feb 23 2021 15:43:12.314]  LOG      Made it here
[Tue Feb 23 2021 15:43:12.364]  LOG      ***** Mounted Edit Layout
[Tue Feb 23 2021 15:43:12.373]  LOG      Made it here
[Tue Feb 23 2021 15:43:12.373]  LOG      ***** Mounted Edit Layout
[Tue Feb 23 2021 15:43:12.384]  LOG      Made it here


Without <Header>
[Tue Feb 23 2021 15:43:32.797]  LOG      ***** Mounted Edit Layout
[Tue Feb 23 2021 15:43:32.856]  LOG      Made it here

标签： reactjsreact-nativecomponents

解决方案

在您当前的代码中，Header每次重新Users呈现组件时都会重新创建（组件）。这将导致错误，因为您不想重新创建子组件（相反，它可能会在需要时重新呈现）。

为了防止这种情况，您应该定义Header外部父组件，即Users（名称应以大写字母开头）。

因此，Header可以在不同的文件中或在同一个文件中（但在外部Users）。如果Header要成为一个大组件，最好将其保存在不同的文件中。

// 不要这样做

function MainComp() {

  //...
  function ChildComp() {
    // ... 
  }

}

// 改为这样做

function MainComp() {
  // ... 
}

function ChildComp() {
  // ... 
}

推荐阅读