寫 React Native 遇到的那些坑與填坑方式

這篇文章應該會一直更新下去,因為我最近工作就是用的 React Native,一天遇到的坑沒有個五個也有三個,所以感覺可以慢慢積累成一篇長文。

Each child in a list should have a unique “key” prop.

這個感覺算是滿常見的警告,就是說在 List 中的 child 都需要給定唯一的 key。

比如:

{
   columns.map(({ key }) => (
      <Text key={key}>{data[key]}</Text>
   ))
}

value provided is not in a recognized RFC2822 or ISO format

嚴格來說這並不能算是 React Native 的坑,但我是在寫 React Native 遇到的所以還是放進來了

( 誤

Moment.js warning:Deprecation warning: value provided is not in a recognized RFC2822 or ISO format.

這是我用了 moment.js 遇到的警告,簡而言之就是所提供的值並非 RFC822 或 ISO 格式。

解決辦法是在 moment 函數中傳入第二個參數 moment.ISO_8601moment.RFC_2822

moment(start, moment.ISO_8601)
moment(end, moment.RFC_2822)

Possible Unhandled Promise Rejection (id:0) Warning

API調用時引發的錯誤,通過加上 catch 函數來解決。

getDataList({ start, end })
    .then((res) => {
      setDataList(res.data);
    })
    .catch((error)=>{
      console.log(error.message);
    });

You have a large list that is slow to update

在 React Native 中當你有大量的數據需要呈現時,會使用 FlatList,而數據量一大很容易造成效率問題。

這個警告的完整說明有點長:

VirtualizedList: You have a large list that is slow to update - make sure your renderItem function renders components that follow React performance best practices like PureComponent, shouldComponentUpdate, etc. 
Object {
	"contentLength": 9177,
	"dt": 501,
	"prevDt": 544,
}

React Native 中,FlatList 的底層是 VirtualizedList 使用 ScrollView 的 onScroll 事件來進行渲染效率的統計。

其中 contentLength 是 List 的長度,dtprevDt 則指的是你觸發這個 onScroll 事件的頻率 。

這個問題的解決方式有滿多種,如果是使用類式組件可以改為繼承 PureComponent,如果是函式組件可以用 useMemo 這個 Hook。

類式組件

class Demo extends React.Component {}

// 改為

class Demo extends React.PureComponent {}

函式組件

const demo = useMemo(() => loadData(a, b), [a, b]);

並且可能建議你不要在 FlatList 的 renderItem 屬性使用內聯箭頭函數。因為使用內聯箭頭函數會在每次重新渲染時重新創建函數,從而導致性能問題。如果您使用的是類式組件,則將 renderItem 渲染功能移出。如果您使用的是函式組件,則使用 useCallback

延伸閱讀:https://codingislove.com/optimize-react-native-flatlist-performance/

https://velog.io/@sangbooom/React-Native-Error-Issue

0 0 評分數
Article Rating
訂閱
通知
guest

0 Comments
在線反饋
查看所有評論