在功能组件中使用 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);

注意：不确定您获得了多少道具以及哪些是独特的。 基本上你需要比较最后一个等于这个返回真这样反应不会重新渲染你的组件