Question

我注意到每当我使用我的组件可用的导航道具导航到另一个页面时，它会触发组件的重新渲染，并且只要我导航到之前渲染过的屏幕，就会调用componentDidMount。

例如，当我将用户导航到他们的个人资料页面并且他们决定返回仪表板时，最初呈现的仪表板组件将再次呈现，并且正在调用componentDidMount，从而减慢了应用程序的速度。

 import { StackNavigator } from 'react-navigation';

    const Routes = StackNavigator({
      home: {
        screen: HomeScreen
      },
      dashboard: {
        screen: Dashboard
      },
      profile: {
        screen: Profile
      }
    },
      {
        headerMode: 'none',
      });

在我的组件中，我使用this.props.navigation.navigate('ScreenName')

导航用户

我很感激任何帮助阻止组件在导航回来时重新渲染。感谢

Answer 1

如果您使用的是React Navigation 5.X，只需执行以下操作：

import { useIsFocused } from '@react-navigation/native'

export default function App(){

const isFocused = useIsFocused()

    useEffect(() => {
        //Update the state you want to be updated
    } , [isFocused])
}

Answer 2

如果我正确理解您的问题，当您离开时，组件将被卸载当您向后导航时，必须重新安装，因此重新渲染。

通常，任何UI更改都需要重新渲染。没有办法解决这个问题 - 根据定义＆＃34;＆＃34;。

您可以缓存该页面。或者使用reselect库来缓存昂贵以获取数据，因此重新渲染的计算速度快且极少。

如果react / react-native 认为道具已更改（在已安装/渲染的组件中），它也会重新渲染，但您可以通过shouldComponentUpdate()影响此决定

Answer 3

我会在你的构造函数中有一个状态变量，如果你导航的话，它会跟踪。状态仅与当前组件相关。因此，如果您导航到＆＃39; ScreenName＆＃39;多次，堆栈构建，每个ScreenName组件都有自己的状态。

 constructor(props)
    super(props)
    this.state = {
       navigatedAway : false
    }

然后在导航到您的屏幕名称之前＃39;屏幕更新状态

  this.setState({
    navigatedAway : true
  },
  () => {
    this.props.navigation.navigate('ScreenName');
  }
);

使用上面的语法确保状态isUpdated然后导航。然后就像丹在上面的评论中所说，如果你的函数 shouldComponentUdate 有条件陈述。

shouldComponentUpdate(newProps){
    // return true if you want to update
    // return false if you do not
}

*旁注*

当您浏览时，我不相信该组件已卸载。您只需打印到控制台即可验证这一点。如果我错了，请纠正我，我对新生的反应很新。

componentDidMount() {
    console.log("COMPONENT_CONTENT_MOUNTED")
}

componentWillUnmount({
    console.log("COMPONENT_CONTENT_UNMOUNTED")
 }

Answer 4

只需将 React.memo 添加到每次重新加载的组件的导出中即可。所以代替导出默认组件

你会：导出默认 React.memo(component);

比较 props 并且只有在 props 改变时才重新渲染（所以不是在导航上而是在实际变化上，这就是你想要的）

当使用react-navigation进行本地反应时，组件会重新呈现

4 个答案: