優化包含圖像的性能react-native組件

我在我的應用程序中使用圖像作爲背景的組件。該組件是一個聊天屏幕，用戶可以查看以前的消息併發送新消息。該組件連接到REDEX存儲。該組件看起來像這樣在高層優化包含圖像的性能react-native組件

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

每次用戶鍵入任何內容時，聊天畫面組件都會重新呈現。有時，用戶報告打字滯後，並在屏幕上看到輸入的字符。我在考慮是否這是由於Image每次用戶鍵入內容時都會重新呈現，並且如果將Messages和TextInput抽取到單獨的組件中並將其連接到redux存儲庫以使Image爲在用戶輸入時不會重新呈現。

如果不會影響性能，我不想進行此更改，並且我沒有確定的方法來測量此更改是否會影響性能，因爲滯後時間非常短暫。

如果您認爲這會影響組件的性能，請告訴我。

來源

2017-09-01 Varun Gupta

使用圖像作爲背景會導致性能問題，特別是在Android上。使用縮小的圖像作爲背景。此外，嘗試通過爲其創建封裝來將狀態更改封裝到TextInput組件。對於Messages組件也使用FlatList是一個好主意。

來源

2017-09-01 15:37:01

嗨@Meysam感謝您的回答，但它不完全是我所要求的。我想知道的是，當react-native重新渲染一個組件時，該組件中有一個'Image'會降低性能，即使該圖像完全沒有改變或反應原生能夠發現'Image'沒有改變，也沒有重新渲染，因此即使我將它從組件中提取出來也不會影響性能。 –

優化包含圖像的性能react-native組件

回答

相關問題