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

Question

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

就是这样

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

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

Answer 1

react中可以通过多种方式优化重新渲染。

1. 您可以使用PureComponent实现，其中react本身比较道具，并仅在必要时重新渲染。

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

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

4. 请确保代码拆分已正确完成。您无法在一个页面中优化大量代码。如果组件足够小，您可以更好地优化它们。

5. 如果你在JS上有很多东西，我强烈建议你使用原生导航解决方案，比如react原生导航

您可以在渲染中使用控制台日志来查找渲染计数并采取必要的操作。请确保这些优化也可以阻止必要的渲染。所以，当你想重新渲染东西时，要确保道具是不同的。

关于装载/卸载在大多数情况下，导航会将屏幕保留在堆栈中。返回不会触发重新渲染。您可以做一件事，确保页面在道具上工作，这样只有在数据更改时才会重新渲染。

帮助链接：

https://medium.com/@ohansemmanuel/如何消除行动性能问题-16a250c27

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

Answer 2

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