Javascript 防止复选框在React中重新呈现

我试图基于动态返回数据呈现多个复选框，并将其选中状态存储在本地状态中

但是，当生成更多的复选框时，性能开始下降。我注意到这个问题是由于每当选中任何一个复选框时，都会不断地重新呈现所有复选框（复选框状态都存储在具有不同键的同一对象中）

这是我的示例代码和codesandbox链接，用于查看实际性能问题（请注意选中复选框时的延迟）

导出默认函数App（）{
const[checkboxResponse，setCheckboxResponse]=useState（[]）；
const[checkboxList，setCheckboxList]=useState（）；
const[checkboxStates，setCheckboxStates]=useState（{}）；
useffect（（）=>{
//生成虚拟数据
常量dummyData=[]；
for（设i=0；i<1000；i++）{
dummyData.push（i.toString（））；
}
//将dummyData设置为动态数据复选框
setCheckboxResponse（dummyData）；
}, []);
useffect（（）=>{
//单击复选框后，添加到本地复选框状态对象
const checkboxChange=key=>event=>{
SetCheckBoxState（{…CheckBoxState，[key]：event.target.checked}）；
};
//检查数据是否可用
如果（复选框响应）{
const checkbox=checkboxResponse.map（键=>{
const value=checkboxStates[key]？checkboxStates[key]：false；
//渲染复选框
返回(
);
});
设置复选框列表（复选框）；
}
}，[checkboxResponse，CheckBoxState]）；
返回(
{复选框列表}
);
}

似乎每当更改

checkboxStates

时，就会重新运行

useffect

钩子，再次触发所有复选框的重新渲染

是否可以防止React在状态更改时再次重新呈现所有复选框？还是我们必须为每个复选框动态创建一个单独的状态

---

任何帮助都将不胜感激。

您可以使用

React.memo

防止重新呈现未更改的复选框。像这样：

import React, { useState, useEffect } from "react";
import { Checkbox, FormControlLabel } from "@material-ui/core";
import "./styles.css";

export default function App() {
  const [checkboxResponse, setCheckboxResponse] = useState([]);
  const [checkboxStates, setCheckboxStates] = useState({});

  //When checkbox is clicked, add to local checkbox states object
  const checkboxChange = key => event => {
    setCheckboxStates({ ...checkboxStates, [key]: event.target.checked });
  };

  useEffect(() => {
    //Generate dummy data
    const dummyData = [];

    for (let i = 0; i < 1000; i++) {
      dummyData.push(i.toString());
    }

    //Set dummyData as checkbox dynamic data
    setCheckboxResponse(dummyData);
  }, []);

  return (
    <div className="App">
      {checkboxResponse.map(key => {
        const value = checkboxStates[key] ? checkboxStates[key] : false;

        //Render checkbox
        return (
          <FormControlLabel
            key={key}
            checked={value}
            control={<MemoCheckbox key={key} checkboxChange={checkboxChange} />}
            label={key}
          />
        );
      })}
    </div>
  );
}

const CustomCheckbox = ({ key, checkboxChange }) => (
  <Checkbox size="small" value={key} onChange={checkboxChange(key)} />
);

const MemoCheckbox = React.memo(
  CustomCheckbox,
  (prev, next) => prev.key === next.key
);

import React，{useState，useffect}来自“React”；
从“@material ui/core”导入{Checkbox，FormControlLabel}；
导入“/styles.css”；
导出默认函数App（）{
const[checkboxResponse，setCheckboxResponse]=useState（[]）；
const[checkboxStates，setCheckboxStates]=useState（{}）；
//单击复选框后，添加到本地复选框状态对象
const checkboxChange=key=>event=>{
SetCheckBoxState（{…CheckBoxState，[key]：event.target.checked}）；
};
useffect（（）=>{
//生成虚拟数据
常量dummyData=[]；
for（设i=0；i<1000；i++）{
dummyData.push（i.toString（））；
}
//将dummyData设置为动态数据复选框
setCheckboxResponse（dummyData）；
}, []);
返回(
{checkboxResponse.map（键=>{
const value=checkboxStates[key]？checkboxStates[key]：false；
//渲染复选框
返回(
);
})}
);
}
const CustomCheckbox=（{key，checkboxChange}）=>(
);
const MemoCheckbox=React.memo(
自定义复选框，
（上一个，下一个）=>prev.key===next.key
);

但是，它可能仍然不够快，因为当您单击复选框时，它仍然通过

.map

循环并创建元素

这是备忘录

import React, { useState, useEffect } from "react";
import { Checkbox, FormControlLabel } from "@material-ui/core";
import "./styles.css";

export default function App() {
  const [checkboxResponse, setCheckboxResponse] = useState([]);
  const [checkboxStates, setCheckboxStates] = useState({});

  //When checkbox is clicked, add to local checkbox states object
  const checkboxChange = key => event => {
    setCheckboxStates({ ...checkboxStates, [key]: event.target.checked });
  };

  useEffect(() => {
    //Generate dummy data
    const dummyData = [];

    for (let i = 0; i < 1000; i++) {
      dummyData.push(i.toString());
    }

    //Set dummyData as checkbox dynamic data
    setCheckboxResponse(dummyData);
  }, []);

  return (
    <div className="App">
      {checkboxResponse.map(key => {
        const value = checkboxStates[key] ? checkboxStates[key] : false;

        //Render checkbox
        return (
          <FormControlLabel
            key={key}
            checked={value}
            control={<MemoCheckbox key={key} checkboxChange={checkboxChange} />}
            label={key}
          />
        );
      })}
    </div>
  );
}

const CustomCheckbox = ({ key, checkboxChange }) => (
  <Checkbox size="small" value={key} onChange={checkboxChange(key)} />
);

const MemoCheckbox = React.memo(
  CustomCheckbox,
  (prev, next) => prev.key === next.key
);