Reactjs 在功能组件中使用React.memo渲染TerItem平面列表，以最小化重新渲染现有项

我使用功能组件，并使用Flatlist来呈现数据列表， 它工作正常，但每次状态获得额外数据时，它总是重新呈现现有状态 这会导致性能问题，我已经读了这些文章，但仍然没有任何线索

这是我使用主平面列表的代码

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

字符串（索引）}
renderItem={RenderUser}
onEndReachedThreshold={0.7}
onEndReached={callBackMoreData}
/>

这里是正在工作的RenderUser，但问题是它会重新渲染现有项 如果州政府有额外的数据，我想实现的只是渲染额外的数据 资料

从“React”导入React；
从“react native elements”导入{ListItem}；
常量RenderUser=（{item，index}）=>{
返回(
{console.log（'index:'，index）}
);
};
导出默认渲染器；

我确实尝试过使用下面的代码（但我收到一条错误消息，说 TypeError:renderItem不是函数。（在“renderItem（props）”中，“renderItem”是函数 对象实例）

import React，{memo}来自“React”；
从“react native elements”导入{ListItem}；
常量RenderUser=（{item，index}）=>{
返回(
{console.log（'index:'，index）}
);
};
导出默认备忘录（RenderUser）；

根据react官方文件：

默认情况下，它只会粗略地比较道具对象中的复杂对象。如果希望控制比较，还可以提供自定义比较函数作为第二个参数

在您的情况下，您需要添加条件：

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);

import React，{memo}来自“React”；
从“react native elements”导入{ListItem}；
常量RenderUser=（{item，index}）=>{
返回(
{console.log（'index:'，index）}
);
};
功能arePropsEqual（前一个Props，下一个Props）{
/*
如果将nextrops传递到渲染将返回true，则返回true
与传递prevProps进行渲染的结果相同，
否则返回false
*/
返回nextrops.item.attribute.name==prevProps.item.attribute.name
}
导出默认备忘录（RenderUser、arePropsEqual）；

---

注意：不确定你得到了多少道具以及哪些道具是独一无二的。基本上，您需要比较最后一个值与此值是否相等，以这种方式返回true react不会重新渲染组件

您需要传递额外的条件以及比较prevProps的备忘录，然后它将阻止渲染extra@ShubhamVerma你能给出基于我上面代码的示例代码吗

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);

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);