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

如何填充 map 而不导致重新渲染？

Answer 1

如果渲染时根本不考虑 map ，那么您可以改变它 - 在这种情况下，使用 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;

---

如果您确实希望更改值而不导致重新渲染。但考虑到

I want the checked-prop of each checkbox to be rendered correctly according to the Map on a re-render

听起来这确实应该是有状态的 - 您几乎肯定希望值的更改会导致复选框立即被选中或取消选中(通过状态)更改并导致重新渲染)。

有状态值能够轻松克隆是件好事，这样设置它们的状态(无需改变当前处于状态的对象)就不会太乏味。考虑使用对象而不是 Map，并且:

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

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

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

My first thought was to fill the Map without triggering re-renders

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