Javascript 在useState中更新映射时避免重新加载组件

如何在useState中填充映射而不触发React组件的重新加载程序

const[myMap，setMyMap]=useState（newmap（））

我将键值放在其中，但每次使用其中一个时，组件都会被重新渲染

const insertToMap=（myMap，setMyMap，k，v）=>{
myMap[k]=v；
setMyMap（myMap）；
}

或

const insertToMap=（myMap，setMyMap，k，v）=>{
myMap[k]=v；
setMyMap（myMap.set（k，v））；
}

如何在不导致重新渲染的情况下填充贴图？
如果在渲染时根本不考虑贴图，则可以对其进行修改-在这种情况下，使用ref比state更有意义：

const myMapRef = useRef(new Map());
// reference myMapRef.current to get to the map

但还要注意，如果要将地图用作地图，则应使用地图方法
.set
、
.get
、和
.has
：

const insertToMap = (myMap, k, v) => {
  myMap.set(k, v);
};

如果您想使用括号表示法来存储值，几乎可以肯定应该使用普通对象，例如

const myObjRef = useRef({});
myObjRef[k] = v;


如果您真的希望值中的更改不会导致重新渲染，则可以这样做。但鉴于此

我希望每个复选框的选中道具根据重新渲染时的贴图正确渲染

听起来这真的应该是有状态的——几乎可以肯定的是，您希望值中的更改导致复选框立即被选中或取消选中（通过状态更改和结果重新呈现）

有状态值可以很容易地克隆，这样设置它们的状态（不改变当前处于状态的对象）就不会太繁琐了。考虑使用一个对象而不是一个映射，并且：

const [checkboxes, setCheckboxes] = useState({});
const insert = (k, v) => {
  setCheckboxes({ ...checkboxes, [k]: v });
};

如果在状态更新之前多次调用此函数，请改用回调窗体：

setCheckboxes(checkboxes => ({ ...checkboxes, [k]: v }));

我的第一个想法是在不触发重新渲染的情况下填充贴图

如果所有的初始设置同步发生，就不必担心了。您还可以在调用此组件之前填充它，并将填充的对象作为道具向下传递。
地图是如何使用的？有一个不影响渲染点的状态似乎有点奇怪。映射中的键是复选框元素的ID，值是布尔值（如果选中或未选中）。因此，我希望每个复选框的
checked
-prop根据重新渲染时的映射正确渲染（css取决于选中状态）。如果这有道理的话。也许我应该一次性填充贴图？如果贴图值对应于渲染的内容，那么值的更改不应该导致重新渲染吗？听起来很奇怪，当听起来像一个重要的有状态变量（映射到被渲染的内容）发生变化时，您想要避免重新渲染。我对我认为的设置有点困惑。我的第一个想法是在不触发重新渲染的情况下填充贴图，然后只在单击复选框后触发重新渲染