为此，如果 props 保持不变，您可以使用React.memo来记住您的组件。但是鉴于您的代码，您需要进行一些额外的更改：

• 您必须申请useCallback记忆 onChangeHandle 函数；

• 要正确记住 onChangeHandle，您需要重构它。你不能selectedChild直接传递，否则它会记住它的值。使用setSelectedChild作为参数传递一个函数来selectedChild代替。

• 您的孩子应该收到isSelected布尔值而不是函数。否则 props 将保持不变并且 Child 永远不会更新；

  import React, { useState, memo, useCallback } from "react";
  
  function Parent() {
    const [selectedChild, setSelectedChild] = useState([]);
  
    const onChangeHandle = useCallback((event, id) => {
      setSelectedChild(selectedChild => {
        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);
          }
        }
        return updatedArray;
      });
    }, []);
  
    const dummy = id => {
      return selectedChild.includes(id);
    };
  
    const renderChildren = () =>
      [1, 2, 3].map((value, index) => {
        return (
          <Child
            key={index}
            index={index}
            value={value}
            handle={onChangeHandle}
            isSelected={dummy(index)}
          />
        );
      });
  
    return (
      <div>
        <table>
          <tbody>{renderChildren()}</tbody>
        </table>
        <div>{selectedChild}</div>
      </div>
    );
  }
  
  const Child = memo(({ index, value, handle, isSelected }) => {
    console.log("rendering");
  
    return (
      <tr>
        <td>
          <input
            type="checkbox"
            checked={isSelected}
            onChange={event => handle(event, index)}
          />
        </td>
        <td>
          hello {index} {value}
        </td>
      </tr>
    );
  });
  
  export default function App() {
    return (
      <div className="App">
        <Parent />
      </div>
    );
  }
  

https://stackblitz.com/edit/so-memo-children?file=src/App.js

基本答案是使用React.memoon Child。

const Child = memo(function Child(...) {...})

但是为了memo工作，如果组件不应该被重新渲染，它需要接收相同的 props。这意味着使用useCallbackon onChangeHandle：

 const onChangeHandle = useCallback((event, id) => {...}, [])

但是由于onChangeHandle使用selectedChild总是在复选框更改时更改，您还需要使用useRef以下方法引用它：

const selectedChildRef = useRef();
selectedChildRef.current = selectedChild;

并在onChangeHandle.

需要做的最后一件事是将isSelectedprop 从函数更改为只是一个标志，因为它需要在每次复选框更改时运行：

isSelected={selectedChild.includes(index)}

https://codesandbox.io/s/newpro-forked-wxvqs

您可以在 Child 的定义中实现 shouldComponentUpdate (doc: https://reactjs.org/docs/react-component.html#shouldcomponentupdate ) 以更好地控制何时重新渲染。但这仅适用于您遇到性能问题的情况 - 通常您不必担心，让它们全部重新渲染是标准的。