在 useState 中更新 Map 时避免重新渲染组件

Question

如何在 useState 中填充 Map 而不触发 React 组件的重新渲染？

const [myMap, setMyMap] = useState(new Map());

我将键值放在那里，但每次使用时都会遇到组件被重新渲染

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));
}

如何在不导致重新渲染的情况下填充地图？

Answer 1

如果在渲染时根本不考虑地图，那么您可以对其进行变异 - 在这种情况下，使用 ref 比使用 state 更有意义：

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

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

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

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

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

---

如果您真的希望更改值不会导致重新渲染。但鉴于

<块引用>

我希望根据重新渲染时的地图正确渲染每个复选框的选中属性

听起来这真的应该是有状态的——你几乎肯定应该希望改变一个值来导致一个复选框立即被选中或取消选中（通过一个状态更改并导致重新渲染）。

有状态的值能够很容易地被克隆是很好的，这样设置它们的状态（不改变当前处于状态的对象）不会太乏味。考虑使用对象而不是 Map，并且：

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

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

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

<块引用>

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

如果所有初始 setter 同步发生，则无需担心。您也可以在调用此组件之前填充它，并将填充的对象作为 prop 向下传递。