反应-在功能组件中使用备注以防止重新呈现

时间:2019-01-26 13:25:02

标签: javascript reactjs performance rendering memoization

我有一个组件调用n次功能组件。 我的父组件拥有一个列表,然后通过映射列表并为每个值返回功能组件来呈现该列表。如果父组件的状态更改时,它们的属性保持不变,我想防止重新呈现这些功能组件。我试图为此使用react.memo,但功能组件仍在渲染。我的功能组件中的道具是:

ListElement.propTypes = {
  t: PropTypes.func, // react-i18next injected
  lng: PropTypes.string, // react-i18next injected
  conversationId: PropTypes.number,
  loggedInUserId: PropTypes.number,
  fromId: PropTypes.number,
  name: PropTypes.string,
  time: PropTypes.string,
  role: PropTypes.string,
  thumbnail: PropTypes.string,
  fromArchiveList: PropTypes.bool,
  hasChatStarted: PropTypes.bool,
  isPatient: PropTypes.bool,
  isNewMessage: PropTypes.bool,
  loggedInUserRole: PropTypes.string,
  isStarred: PropTypes.bool,
  unReadMessageCount: PropTypes.number,
};

列表很大,包含200多个值。而且我猜测这就是为什么探查器显示我的父组件需要长时间进行重做的原因。每个列表元素也具有唯一键。有人可以帮我吗?

0 个答案:

没有答案