如何避免在父组件状态更新时重新渲染循环中的所有子组件

我有一个子组件，它位于父组件的循环内。当子组件之一更新父组件的状态时，它会重新渲染所有子组件，因为它是循环的。我怎样才能避免每次迭代的重新渲染。

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);
  }
  const dummy = (id) => {
    return selectedChild.includes(id);
  }
  return (
    <div>
    <table>
    <tbody>
      {[1,2,3].map((value, index) => {
      return (
        <Child 
        key={index} 
        index={index} 
        value={value} 
        handle={onChangeHandle}
        isSelected={dummy}
        />
      )
      })}
    </tbody>
    </table>
    <div>
      {selectedChild}
    </div>
  </div>)
}

function Child({index, value, handle, isSelected }) {
  console.log('rendering')

 return (
 <tr>
    <td>
      <input 
      type="checkbox" 
      checked={isSelected(index)}
      onChange={(event) => handle(event, index)}/>
    </td>
    <td>hello {index} {value}</td>
 </tr>
 )
}

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

当前行为：在上面的代码中，当我单击子组件之一中的复选框时，它正在更新父组件状态（selectedChild）。因此循环正在执行，所有子项（所有表行）都在重新渲染。

预期行为：只有特定的行需要重新渲染

Demo: https://codesandbox.io/s/newpro-0pezc https://codesandbox.io/s/newpro-0pezc

为此你可以使用React.memo https://pt-br.reactjs.org/docs/react-api.html#reactmemo如果 props 保持不变，这将记住你的组件。但鉴于您的代码，您需要进行一些额外的更改：

• 你必须申请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 https://stackblitz.com/edit/so-memo-children?file=src/App.js