如果部分状态发生变化，如何停止反应重新渲染组件？

Question

如果只有部分状态发生变化，有没有办法停止重新渲染？

问题是每次我将鼠标悬停在标记上时，都会打开或关闭一个弹出窗口，它会导致所有标记重新渲染，即使mystate没有改变只是activePlace状态正在改变。console.log(myState);每次我在标记内外徘徊时都在运行。

我尝试使用 useMemo 钩子，但不知道如何使用它。有什么帮助吗？

这是我的代码：

import React, { useEffect, useState } from 'react';

import { Map, TileLayer, Marker, Popup } from 'react-leaflet';

import axios from 'axios';

import { v4 as uuidv4 } from 'uuid';

import { Icon } from 'leaflet';

const myicon = new Icon({

  iconUrl: './icon.svg',

  iconSize: [20, 20]

});

const MyMap = () => {

  const [myState, setMyState] = useState(null);

  const [activePlace, setActivePlace] = useState(null);

  const getData = async () => {

    let response = await axios

      .get('https://corona.lmao.ninja/v2/jhucsse')

      .catch(err => console.log(err));

    let data = response.data;

    setMyState(data);

    // console.log(data);

  };

  useEffect(() => {

    getData();

  }, []);

  if (myState) {

    console.log(myState);

    return (

        <Map

          style={{ height: '100vh', width: '100vw' }}

          center={[14.561, 17.102]}

          zoom={1}

        >

          <TileLayer

            attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors &copy; <a href="https://carto.com/attributions">CARTO</a>'

            url={

              'https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png'

            }

          />

          {myState.map(country => {

            return (

              <Marker

                key={uuidv4()}

                position={[

                  country.coordinates.latitude,

                  country.coordinates.longitude

                ]}

                onmouseover={() => {

                  setActivePlace(country);

                }}

                onmouseout={() => {

                  setActivePlace(null);

                }}

                icon={myicon}

              />

            );

          })}

Answer 1

这条线是你的问题：key={uuidv4()}为什么要在每个渲染上创建一个唯一 ID？ID 的意义在于它在渲染之间保持不变，以便 React 知道它不必在 DOM 中重新绘制该组件。每当状态发生变化时，都会发生两个阶段，即渲染阶段和提交阶段。渲染阶段首先发生，这是所有组件执行其渲染功能的地方（在功能组件的情况下是整个组件）。返回的 JSX 被转换为 DOM 节点并添加到虚拟 DOM中。这非常有效，并且与重新渲染实际 DOM 不同。在提交阶段，将新的虚拟 DOM 与真实 DOM 进行比较，在真实 DOM 中发现的任何差异都将重新渲染。React 的重点是限制真实 DOM 的重新渲染。不是限制虚拟DOM的重新计算。这意味着整个组件在更改时运行其渲染周期是完全可以的activePlace。country然而，因为你在每个渲染周期给每个国家都赋予了一个全新的 ID&nbsp;，虚拟 DOM 认为每个国家都发生了变化（它使用 ID 来比较以前的 DOM 值），所以实际 DOM 中的所有国家也会重新获得渲染，这可能就是您看到延迟问题的原因。ID 应该是与国家相关的东西，例如国家代码，而不仅仅是一个随机的 UUID。如果您确实使用随机 UUID，请将它们与国家/地区一起保存，以便始终使用相同的 UUID。