如何防止在 React 中添加新元素时重新渲染整个列表

Question

当新元素添加到列表中时，我只想渲染新添加的元素，而不是重新渲染整个列表。 我尝试添加关键道具，但仍然所有元素都在渲染。 这是我的用例https://codesandbox.io/s/jovial-poincare-qcsvn?file=/src/App.js的示例代码，在这里我们可以在添加新元素时看到所有列表元素的控制台日志元素到列表中。

Answer 1

发生这种情况是因为您在 App 组件中定义了 CommentView 组件，状态的任何更新都会导致组件重新渲染，并且 react 将这些 CommentView 重新创建的版本视为完全不同的组件，让我们假设 react 认为您更改了 div 以跨越它不知道它们是同一个旧组件

将组件提升到 App 组件之外

const CommentView = React.memo(/**/)
const App = () => {/* rest without the CommentView definition */}

如果你愿意，你也可以使用 Pure 组件而不是 memo，它们比较浅

class CommentView extends PureComponent {
  render() {
    const comment = this.props.comment;
    return (
      <h1 key={`comment-${comment.id}`}>
        {console.log("Rendering", comment.id)}
        {comment.id}: {comment.msg}
      </h1>
    );
  }
}

export default function App() {
// rest of code

Answer 2

首先，您的 id 不是唯一的。 如果添加它，它将是唯一的：

 {
    id: comments[comments.length - 1].id + 1,
    msg: "C"
 }

改变状态意味着当我们调用setState函数时 React 会触发更新（在 React 钩子中，你会使用useState ）。 这不仅意味着组件的渲染函数将被调用，而且其所有后续子组件都将重新渲染，无论它们的 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);