本文對RN學(xué)習(xí)中遇到的問題做一個(gè)合集半抱,方便自己查看巍虫。
問題來自國外開發(fā)者Sriraman寫的開發(fā)接觸RN一年的感觸
原文地址:What we learned after using React Native for a year 文章發(fā)布時(shí)間:2016年11月11日
React-Native問題:
1.Animation API 占用了JS全部進(jìn)程導(dǎo)致APP性能不行
官方已經(jīng)逐漸將大部分動(dòng)畫遷移至原生纷宇。
2.頻繁的react-native版本更新周期
頻繁的react-native版本更新導(dǎo)致每次升級都要花大量的時(shí)間修復(fù)升級引起的問題。
性能問題以及解決方法
1.ListView組件在數(shù)據(jù)量大的時(shí)候內(nèi)存占用過多
解決方法:
(1).[SGListView](https://github.com/sghiassy/react-native-sglistview) 考慮到內(nèi)存占用的組件朝聋,但性能不行沉馆。
(2) **[react-native-tableview](https://github.com/aksonov/react-native-tableview)**
貌似只能IOS端
這個(gè)問題解決方法后續(xù)補(bǔ)充
2.頁面(page)跳轉(zhuǎn)緩慢
因?yàn)榻缑嬖谔D(zhuǎn)執(zhí)行動(dòng)畫的同時(shí)會(huì)渲染相關(guān)的視圖組件。
解決辦法:可以在動(dòng)畫進(jìn)行時(shí)加載部分主要的視圖抚吠,剩余的在推入動(dòng)畫執(zhí)行完成后渲染常潮。
3.在對圖片尺寸執(zhí)行大小調(diào)節(jié)動(dòng)畫時(shí),JS線程阻塞問題
Transforming the image using scale property fixed the issue for us.
3.安卓端內(nèi)存占用過多閃退問題
React Native Android is based on Fresco for loading and displaying images.
在項(xiàng)目中安卓端盡可能使用JPG格式的圖像楷力。
總結(jié):
1.Start by implementing everything in JS for maximum productivity.
2.If traditional React optimizations fail, surgically move the troublesome parts to the native part for better performance. But, don't overuse the bridge.
3.For animations/interactions, try to use declarative libraries like Animated whenever possible. However, some complex interactions can't be expressed declaratively, and offloaded.
4.Use JPEG images whenever possible.
5.Investing time on learning more about the React Native internals will be very helpful in making better apps.
1.盡可能用JS 即(react-native)與此相對的是原生(native)來實(shí)現(xiàn)想要的功能喊式,以獲得更高的效率。
2.如果說(react-native)功能優(yōu)化已經(jīng)盡最大可能萧朝,但仍然解決不了問題岔留,可以嘗試用原生來實(shí)現(xiàn)。
3.對于動(dòng)畫/交互剪勿,盡可能使用聲明庫 如Animated
4.盡可能使用JPEG圖像贸诚。
5.投入時(shí)間學(xué)習(xí)React Native原理將非常有助于更好的應(yīng)用程序。
`