Question

我有一个在传单地图上渲染标记的组件。每当服务器为一个或多个标记发送新位置时，标记就需要更改位置。如何在不重新渲染所有标记的情况下更改已更改其位置的特定标记的位置？

我当时在考虑使用useMemo钩子，但由于无法在回调函数中调用该钩子，因此未能在地图函数上成功使用此钩子。


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 codeandbox解释得最好。
重组participants数组。最初将lat和long组在一起将阻止在渲染阶段创建新引用。 This codeandbox对此进行了演示。

奖金：由于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>
  );
};

如何使用useMemo挂钩来记忆孩子

1 个答案: