Reactjs 我不明白为什么这个扬声器组件上需要React.memo来防止额外渲染

我有下面的代码Sandbox并粘贴在这里，它需要扬声器组件上的React.memo。我不明白为什么有必要，因为我认为备忘录所做的只是检查道具是否改变了。对于点击次数不变的发言者，我不明白为什么需要备忘录

React.memo是一种性能优化。正如您所说，如果请求具有相同道具的渲染，它将返回一个已记忆的渲染结果

这意味着它只与经常使用相同道具渲染的组件相关，或者由于许多或大型子组件而渲染成本高昂

在这种特殊情况下，如果扬声器不同，其好处可能很小，除非经常呈现封闭组件。

React.memo是一种性能优化。正如您所说，如果请求具有相同道具的渲染，它将返回一个已记忆的渲染结果

这意味着它只与经常使用相同道具渲染的组件相关，或者由于许多或大型子组件而渲染成本高昂

在这种特殊情况下，如果扬声器不同，其好处可能很小，除非经常呈现封闭组件。

memo是一个高阶组件。如果您的组件在给定相同道具的情况下呈现相同的结果，则可以将其包装在调用中以进行响应。在某些情况下，通过记录结果来提高性能。这意味着React将跳过渲染组件，并重用上次渲染的结果。您的组件将被渲染一次，并且在需要时，将重用以前的渲染，这将提高其性能

在您的情况下，您的扬声器似乎没有改变，因此这里的目的是避免在每次需要时渲染扬声器组件，相反，它只在一个地方渲染一次并缓存，当需要在另一个地方渲染时，它不会重新渲染，因为React将使用缓存的结果。

memo是一个更高阶的组件。如果您的组件在给定相同道具的情况下呈现相同的结果，则可以将其包装在调用中以进行响应。在某些情况下，通过记录结果来提高性能。这意味着React将跳过渲染组件，并重用上次渲染的结果。您的组件将被渲染一次，并且在需要时，将重用以前的渲染，这将提高其性能

---

在您的情况下，您的扬声器似乎没有改变，因此这里的目的是避免在每次需要时渲染扬声器组件，相反，它只会在一个位置渲染一次并缓存，当需要在另一个位置渲染时，它不会重新渲染，因为React将使用缓存的结果。

我仍然不理解React为什么要在没有记忆的情况下重新渲染该组件React的工作方式是它渲染组件，然后将结果与DOM中的现有组件进行比较，如果更改了，则更改DOM。最昂贵的是DOM更改，而不是渲染本身。我仍然不明白为什么react要在没有记忆的情况下重新渲染该组件react的工作方式是，它渲染组件，然后将结果与DOM中的现有组件进行比较，如果它更改，则会更改DOM。代价高昂的是DOM更改，而不是渲染本身。

import React, { useState, memo, useCallback } from 'react';

const Speaker = memo(({ speaker, speakerClick }) => {
  console.log(speaker.id);
  return (
    <div className="speaker-col">
      <span
        onClick={() => {
          speakerClick(speaker.id);
        }}
      >
        {speaker.id} {speaker.name}
      </span>
      &nbsp;&nbsp;
      <span className="fa fa-star ">&nbsp;&nbsp;{speaker.clickCount}</span>
      &nbsp;
    </div>
  );
});

function SpeakerList({ speakers, setSpeakers }) {

  const speakerClick = useCallback(
    (id) => {
      // passing a callback avoid using a stale object reference
      setSpeakers((speakers) => {
        return speakers.map((speaker) => {
          return speaker.id === id
            ? { ...speaker, clickCount: speaker.clickCount + 1 }
            : speaker;
        });
      });
    },
    [setSpeakers], // you can add setSpeakers as dependency since no change
  );

  return (
    <div>
      {speakers.map((speaker) => {
        return (
          <Speaker
            speaker={speaker}
            speakerClick={speakerClick}
            key={speaker.id}
          />
        );
      })}
    </div>
  );
}

//
const App = () => {
  const speakersArray = [
    { id: 1124, name: 'aaa', clickCount: 0 },
    { id: 1530, name: 'bbb', clickCount: 0 },
    { id: 10803, name: 'ccc', clickCount: 0 },
  ];

  const [speakers, setSpeakers] = useState(speakersArray);

  return (
    <div className="speakers-list">
      <h1>Speaker List</h1>
      <SpeakerList
        speakers={speakers}
        setSpeakers={setSpeakers}
      />
    </div>
  );
};

export default App;