优化包含图像的性能react-native组件

Question

我的应用中有一个使用图像作为背景的组件。该组件是一个聊天屏幕，用户可以在其中查看以前的消息并发送新消息。该组件连接到redux商店。该组件在高级别看起来像这样

// Chat screen
<Image>
  <Messages />
  <TextInput />
</Image>

每次用户输入任何内容时，都会重新呈现聊天屏幕组件。有时，用户报告在键入和查看屏幕上键入的字符时出现延迟。我想是否是因为Image每次用户输入内容时都会重新呈现，如果将Messages和TextInput提取到一个单独的组件中是有意义的并将其连接到redux商店，以便在用户输入时不会重新呈现Image。

如果它不会影响性能，我不想做出这种改变，而且我没有确定的测量方法来测量这种改变是否影响了性能，因为延迟非常间歇。

如果您认为这会影响组件的性能，请告诉我。

Answer 1

将图像用作背景可能会导致性能问题，尤其是在Android上。使用缩小图像作为背景。此外，尝试通过为其创建包装来将状态更改封装到TextInput组件。将FlatList用于Messages组件也是一个好主意。