使用相同的 props 来反应备忘录重新渲染？

Question

有一个相当简单的功能组件，如果给出相同的道具，我想阻止它被重新渲染。下面是网上找的，貌似不行。知道我应该做什么吗？

就我而言， props 由一组对象组成。其中一些也是嵌套对象。这也许是一个线索？

export const DataTable = React.memo(renderedTable)

export default function renderedTable(props) {
    console.log(props) // logs exactly the same props twice
    ...
}

Answer 1

就我而言， props 由一组对象组成。其中一些也是嵌套对象

React.memo只做浅层比较。

因此，您需要提供自己的比较逻辑作为第二个参数。

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