使用 react-navigation 进行本机反应时组件重新渲染答案

【问题标题】：Component re-renders when using react-navigation for react native使用 react-navigation 进行本机反应时组件重新渲染
【发布时间】：2018-04-16 13:20:30
【问题描述】：

我注意到，每当我使用组件可用的导航道具导航到另一个页面时，它都会触发组件的重新渲染，并且每当我导航到之前渲染过的屏幕时都会调用 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') 导航用户

如果在导航回组件时阻止组件重新渲染，我将不胜感激。谢谢

【问题讨论】：

假设您的屏幕是有状态的，如果您不想重新渲染，请添加一个返回 false 的 shouldComponentUpdate 生命周期方法。
感谢您的回复。在初始渲染时怎么样，我希望组件只有在用户在第一个实例之后导航回它时才能正常渲染。

标签： javascript reactjs react-native

【解决方案1】：

我会在你的构造函数中有一个状态变量来跟踪你是否导航。状态仅与当前组件相关。因此，如果您多次导航到“ScreenName”，则会构建堆栈并且每个 ScreenName 组件都有自己的状态。

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

然后在导航到“屏幕名称”屏幕之前更新状态

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

使用上面的语法来确保状态是更新然后导航。然后就像 Dan 在上面的 cmets 中所说，如果您的函数 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")
 }

【讨论】：

ComponentDidMount 正在被调用，我可以看到我添加到其中的控制台日志。反正我喜欢你的方法。
嗨，你能看看我的问题吗？ stackoverflow.com/questions/66548327/…

【解决方案2】：

如果您使用的是 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])
}

【讨论】：

嗨，你能看看我的问题吗？ stackoverflow.com/questions/66548327/…

【解决方案3】：

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

一般来说，任何 UI 更改都需要重新渲染。没办法 - 这是一种“根据定义”。

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

如果 react/react-native 认为道具发生了变化（在已经安装/渲染的组件中），它也会重新渲染，但您可以通过 shouldComponentUpdate() 影响这个决定。

【讨论】：

嗨，你能看看我的问题吗？ stackoverflow.com/questions/66548327/…

【解决方案4】：

只需将 React.memo 添加到每次重新加载的组件的导出中。所以而不是导出默认组件

您将拥有：导出默认 React.memo(component);

哪个比较 props 并且仅在 props 发生变化时重新渲染（所以不是在导航上而是在实际变化上，这就是你想要的）

【讨论】：