更改数组中的一个状态会导致React Hooks中整个循环生成的自定义组件的重新渲染

Question

我正在使用React Hooks。我正在从地图中填充按钮列表。每个按钮在disabled属性上都有其自己的状态。填充它们后，单击按钮时，我想将该按钮设置为禁用。

const initialBtnDisabled = [false, false, false, false, false, false, false, false];
const [btnDisabled, setBtnDisabled] = useState(initialBtnDisabled);

const onChange = event => {
  const btnIndex = event.target.value;

  let btnDisabledcopy = [...btnDisabled]
  btnDisabledcopy[btnIndex] = true
  setBtnDisabled(btnDisabledcopy)        
}

const Button = (props) => {
  console.log("I am from button");

  const { btnIndex } = props
    return (
      <button onClick={onChange} value={btnIndex} disabled={btnDisabled[btnIndex]}>click me</button>
          )
}

const btnArr = [1, 2, 3, 4, 5, 6, 7, 8]
const btnFields = btnArr.map((item, index) =>
  <td key={index}>
    <Button btnIndex={index} />
  </td>
);

return (
  <tr>{btnFields}</tr>
)

现在这行得通，但是问题出在每次单击按钮时，再次为整个循环重新渲染Button组件，而我只更改了数组的一种状态。 console.log组件中的Button每次单击记录8次。

如何防止这种情况？

Answer 1

您可以防止使用React PureComponent进行重新渲染。仅当更新通过的道具时，才会重新渲染组件。

const initialBtnDisabled = [false, false, false, false, false, false, false, false];
const [btnDisabled, setBtnDisabled] = useState(initialBtnDisabled);

const onChange = event => {
  const btnIndex = event.target.value;

  let btnDisabledcopy = [...btnDisabled]
  btnDisabledcopy[btnIndex] = true
  setBtnDisabled(btnDisabledcopy)        
}

class Button extends React.Component {
  render () {
    console.log("I am from button");
    const { btnIndex } = this.props;
    return (
      <button onClick={onChange} value={btnIndex} disabled={btnDisabled[btnIndex]}>click me</button>
    )
  }
}

const btnArr = [1, 2, 3, 4, 5, 6, 7, 8]
const btnFields = btnArr.map((item, index) =>
  <td key={index}>
    <Button btnIndex={index} />
  </td>
);

return (
  <tr>{btnFields}</tr>
)