在功能組件中使用 React.memo 來渲染 Item FlatList 以最小化重新渲染現有項目

Question

我正在使用功能組件，並使用 Flatlist 來呈現數據列表，它工作正常，但每次 state 獲取額外數據時，它總是重新呈現現有數據，這會導致性能問題，我已經從 SO 閱讀了這些文章，但仍然有沒有線索

• https://stackoverflow.com/a/57405307/938947
• https://stackoverflow.com/a/46349156/938947

這是我使用主 Flatlist 的代碼

<FlatList
  horizontal={false}
  showsHorizontalScrollIndicator={false}
  data={users}
  keyExtractor={(item, index) => String(index)}
  renderItem={RenderUser}
  onEndReachedThreshold={0.7}
  onEndReached={callBackMoreData}
/>

這里正在工作 RenderUser 但如果 state 有額外的數據，它會重新呈現現有項目的問題，我想要實現的只是呈現額外的數據

import React from 'react';
import { ListItem } from 'react-native-elements';

const RenderUser = ({ item, index }) => {

  return (
    <React.Fragment>
      { console.log('index: ', index)}
      <ListItem 
        title={item.attributes.name}
      />
    </React.Fragment>
  );
};

export default RenderUser;

我確實嘗試使用下面的代碼（但我收到一條錯誤消息，說 TypeError: renderItem is not a function. (in 'renderItem(props)', 'renderItem' is an instance of object)）

import React, { memo } from 'react';
import { ListItem } from 'react-native-elements';

const RenderUser = ({ item, index }) => {

  return (
    <React.Fragment>
      { console.log('index: ', index)}
      <ListItem 
        title={item.attributes.name}
      />
    </React.Fragment>
  );
};

export default memo(RenderUser);

Answer 1

根據 React 官方文檔：

默認情況下，它只會淺比較道具 object 中的復雜對象。如果你想控制比較，你也可以提供自定義比較 function 作為第二個參數

function MyComponent(props) {
  /* render using props */
}
function areEqual(prevProps, nextProps) {
  /*
  return true if passing nextProps to render would return
  the same result as passing prevProps to render,
  otherwise return false
  */
}
export default React.memo(MyComponent, areEqual);

在您的情況下，您需要添加條件：

import React, { memo } from 'react';
import { ListItem } from 'react-native-elements';

const RenderUser = ({ item, index }) => {

  return (
    <React.Fragment>
      { console.log('index: ', index)}
      <ListItem 
        title={item.attributes.name}
      />
    </React.Fragment>
  );
};

function arePropsEqual(prevProps, nextProps) {
      /*
      return true if passing nextProps to render would return
      the same result as passing prevProps to render,
      otherwise return false
      */
      return nextProps.item.attribute.name===prevProps.item.attribute.name
    }

export default memo(RenderUser,arePropsEqual);

注意：不確定您獲得了多少道具以及哪些是獨特的。 基本上你需要比較最后一個等於這個返回真這樣反應不會重新渲染你的組件