Javascript 如何仅渲染子孩子而不渲染所有高级组件

我有一个子组件，它位于父组件的循环中。当其中一个子组件更新父组件的状态时，它将重新渲染所有子组件，因为它是循环。如何避免每次迭代的重新渲染。它应该更新该特定子级

import React, { useState } from "react";

function Parent() {
  const [selectedChild, setSelectedChild] = useState([]);

  const onChangeHandle = (event, id) => {
    const checked = event.target.checked;
    let updatedArray = [...selectedChild];
    if (checked) {
      if (!selectedChild.includes(id)) {
        updatedArray.push(id);
      }
    } else {
      var index = updatedArray.indexOf(id);
      if (index !== -1) {
        updatedArray.splice(index, 1);
      }
    }
    setSelectedChild(updatedArray);
  };

  return (
    <div>
      <table>
        <tbody>
          {[1, 2, 3].map((value, index) => {
            return (
              <Child
                key={index}
                index={index}
                value={value}
                handle={onChangeHandle}
                isSelected={selectedChild.includes(index)}
              />
            );
          })}
        </tbody>
      </table>
      <div>{selectedChild}</div>
    </div>
  );
}

function Child({ index, value, handle, isSelected }) {
  console.log("rendering child");

  return (
    <tr>
      <td>
        <SubChild
          isChecked={isSelected}
          onChangeHandle={handle}
          index={index}
        />
      </td>
      <td>
        hello {index} {value}
      </td>
    </tr>
  );
}

function SubChild({ isChecked, onChangeHandle, index }) {
  console.log("rendering subchild");

  return (
    <input
      type="checkbox"
      checked={isChecked}
      onChange={(event) => onChangeHandle(event, index)}
    />
  );
}

export default function App() {
  return (
    <div className="App">
      <Parent />
    </div>
  );
}

import React，{useState}来自“React”；
函数父函数（）{
const[selectedChild，setSelectedChild]=useState（[]）；
const onchangehold=（事件，id）=>{
const checked=event.target.checked；
让UpdateArray=[…selectedChild]；
如果（选中）{
如果（！selectedChild.includes（id））{
UpdateArray.push（id）；
}
}否则{
var index=updateArray.indexOf（id）；
如果（索引！=-1）{
更新的阵列拼接（索引，1）；
}
}
setSelectedChild（UpdateArray）；
};
返回(
{[1,2,3].map（（值，索引）=>{
返回(
);
})}
{selectedChild}
);
}
函数子级（{index，value，handle，isSelected}）{
console.log（“呈现子项”）；
返回(
你好{index}{value}
);
}
函数子child（{isChecked，onchangehold，index}）{
console.log（“呈现子孩子”）；
返回(
onChangeHandle（事件、索引）}
/>
);
}
导出默认函数App（）{
返回(
);
}

当前行为：在上述代码中，当我单击其中一个子组件中的复选框（它是子子组件）时，它正在更新父组件状态（selectedChild）。因此，循环正在执行，所有子级（所有表行）都在重新呈现

// Make a stable callback
const onChangeHandle = useCallback((event, id) => {
  setSelectedChild((updatedArray) => {
    if (event.target.checked) {
      if (!updatedArray.includes(id)) {
        return [...updatedArray, id];
      }
    } else {
      return updatedArray.filter((currId) => currId !== id);
    }
    return updatedArray;
  });
}, []);

// Memoize the component
const MemoChild = React.memo(Child);
const MemoSubChild = React.memo(SubChild);

预期行为：只有特定子级必须重新渲染（即使它不应重新渲染子级）

演示：

---

小相关问题：

您应该使用备忘录（

useCallback

/

React.memo

）并使用功能更新重写句柄逻辑

另外，由于在渲染后有一个新的

值，因此避免使用
Child
进行渲染

// Make a stable callback
const onChangeHandle = useCallback((event, id) => {
  setSelectedChild((updatedArray) => {
    if (event.target.checked) {
      if (!updatedArray.includes(id)) {
        return [...updatedArray, id];
      }
    } else {
      return updatedArray.filter((currId) => currId !== id);
    }
    return updatedArray;
  });
}, []);

// Memoize the component
const MemoChild = React.memo(Child);
const MemoSubChild = React.memo(SubChild);