4

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


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）。所以循环正在执行，所有子项（所有表行）都在重新渲染。

预期行为： 只有该特定行必须重新渲染

演示： https ://codesandbox.io/s/newpro-0pezc

4

3 回答 3

3

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

  • 您必须申请useCallbackmemoize 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

于 2021-01-08T14:42:29.610 回答
1

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

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

但是为了memo工作，如果组件不应该被重新渲染，它需要接收相同的道具。这意味着使用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

于 2021-01-08T14:39:38.047 回答
0

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

于 2021-01-08T14:02:22.247 回答