기능 구성 요소에서 React.memo를 사용하여 기존 항목을 다시 렌더링하는 것을 최소화하기 위해 FlatList를 renderItem

Question

기능 구성 요소를 사용하고 Flatlist를 사용하여 데이터 목록을 렌더링하고 있지만 상태가 추가 데이터를 가져올 때마다 항상 기존 데이터를 다시 렌더링하고 성능 문제를 일으킬 수 있습니다.이 기사를 읽었지만 여전히 단서가 없다

• 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가 있지만 상태에 추가 데이터가있는 경우 기존 항목을 다시 렌더링하는 문제는 추가 데이터 만 렌더링하는 것입니다.

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. ( 'renderItem (props)'에서 'renderItem'은 객체의 인스턴스입니다) "라는 오류 메시지가 나타납니다.)

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

반응 공식 문서에 따르면 :

기본적으로 소품 개체의 복잡한 개체 만 얕게 비교합니다. 비교를 제어하려면 사용자 지정 비교 함수를 두 번째 인수로 제공 할 수도 있습니다.

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

참고 : 얼마나 많은 소품을 얻고 무엇이 고유한지 확실하지 않습니다. 기본적으로 마지막 항목이이 항목과 동일하다는 것을 비교해야합니다. 반응이 구성 요소를 다시 렌더링하지 않는 방식으로 true를 반환합니다.