javascript - 如何使用 useMemo 钩子(Hook)来内存 child

Question

我有一个在传单 map 上渲染标记的组件。每当服务器发送一个或多个标记的新位置时，标记都需要更改位置。如何更改更改其位置的特定标记的位置而不重新渲染所有标记？

我正在考虑使用 useMemo 钩子(Hook)，但我没有成功在 map 函数上使用这个钩子(Hook)，因为钩子(Hook)无法在回调内部调用。

const Participants = () => {
  // This pattern is showed here: https://medium.com/digio-australia/using-the-react-usecontext-hook-9f55461c4eae
  const { participants, setParticipants } = useContext(ParticipantsContext);

  useEffect(() => {
    const socket = io('http://127.0.0.1:8000');
    socket.on('location', data => {
      if (data) {
        const ps = [...participants];
        // currently change the position of the first participant
        ps[0].lat = data.dLat;
        ps[0].long = data.dLong;
        setParticipants(ps);
        console.log(data);
      }
    });
  }, []);


  const renderParticipants = () => {
    return participants.map(p => {
      return (
        <ParticipantIcon key={p.id} id={p.id} position={[p.lat, p.long]}>
          {p.id}
        </ParticipantIcon>
      );
    });
  };
  return <div>{renderParticipants()}</div>;
};


const ParticipantIcon = ({ id, position, children }) => {
  // This is showing if the component rerenderd
  useEffect(() => {
    console.log(id);
  });

  return (
    <MapIcon icon={droneIcon} position={position}>
      {children}
    </MapIcon>
  );
};

实际结果是，每次套接字接收到位置时，它都会重新渲染所有参与者的图标，而不是仅重新渲染数组中的第一个参与者。

Answer 1

由于每次渲染都会更新整个 position 数组，因此对表示先前位置和当前位置的数组的引用将会不同，尽管纬度和经度可能完全相同。要使其正常工作，请将 PariticpantIcon 包装在 React.memo 内，然后执行以下任一操作:

• 将 position 拆分为 2 个不同的属性，即 lat 和 long。然后在 ParticipantIcon 内您可以将它们重新组合在一起。 This codesandbox 解释得最好。

• 重构participants数组。将lat 和long 组合在一起最初会阻止在渲染阶段创建新引用。 This codesandbox 演示了这一点。

奖励:由于 ParticipantIcon 组件仅显示 id，因此您不妨像这样使其更简洁:

const ParticipantIcon = ({ id, position, children }) => {
  // This is showing if the component rerenderd
  useEffect(() => {
    console.log(id);
  });

  return (
    <MapIcon icon={droneIcon} position={position}>
      {id}
    </MapIcon>
  );
};