React Native-如何防止不必要的组件卸载？

Question

我有一个WhatsApp克隆项目。从用户列表组件，它将重定向到每个用户chatWindow。我不想重新渲染已经渲染的chatWindow组件。

这就是发生的事情

1. 从用户通道导航到ChatWindow1-已安装ChatWindow1
2. 从ChatWindow1导航到Userchannel-卸载ChatWindow1
3. 从用户通道导航到ChatWindow2-已安装ChatWindow2
4. 从ChatWindow2导航到用户频道-卸载ChatWindow2
5. 从用户频道导航到ChatWindow1-再次安装ChatWindow1。

我知道使用状态我们可以再次渲染ChatWindow。但是有可能避免不必要的重新渲染。目前，我使用RNRF作为路由器。

Answer 1

在反应中可以通过多种方式来优化重新渲染。

1. 您可以使用PureComponent实现，在这种实现中，自己的反应比较浅，仅在必要时比较道具并重新渲染。

2. 如果要进行更精细的控制，请使用shouldComponentUpdate，它为您提供了一种生命周期方法，您可以在其中比较道具并决定是否要避免渲染。请确保比较不复杂。比较复杂的比较可能会使应用变慢，在这种情况下，优化反击。

3. 使用平面列表而不是列表视图或滚动视图，以获得更好的性能，并确保您添加keyExtractor和Item作为PureComponent。

4. 确保正确完成代码拆分。您无法在单个页面中优化大量代码。如果组件足够小，则可以更好地对其进行优化。

5. 如果您在使用JS方面有很多工作，我强烈建议您使用react-native navigation

之类的本机导航解决方案

您可以在渲染中使用控制台日志来找出渲染计数并采取必要的操作。请确保这些优化也可以阻止必要的渲染。因此，当您要重新渲染事物时，请确保道具不同。

关于安装/卸载 在大多数情况下，导航会将屏幕保留在堆栈中。返回将不会触发重新渲染。您可以做一件事，确保页面可以在props上使用，以便仅在数据更改时才进行重新渲染。

有用的链接：

https://medium.com/@ohansemmanuel/how-to-eliminate-react-performance-issues-a16a250c0f27

https://medium.com/vena-engineering/optimizing-react-rendering-61a10e741edb

Answer 2

由于屏幕已卸载，因此导航回到该屏幕时没有任何错误可以重新渲染。当然，可以通过安装所有屏幕来避免这种情况，但这可能会导致内存泄漏。