向页面添加元素而不重新渲染已添加的元素

Question

我有一大堆对象，一个对象 - 一个元素。我使用 map () 在页面上呈现它们，但只有前 5 个。我有一个按钮“再显示 5 个”，当我点击它时，会呈现另外 5 个，总共已经 10 个。

问题是当再渲染 5 个元素时，其余的元素会重新渲染，这对性能不利。我正在使用功能组件，因此 shouldComponentUpdate () 不起作用。 react-window 也不会，因为我没有巨大的卷轴。我该如何解决这个问题？

Answer 1

将您的功能组件包装在 React.memo(...) 中。如果输入（属性）相同，React 将缓存输出并跳过重新渲染。