为什么更改状态后整页会更新？

Question

嗨，我有一个React应用，这是我的代码：

this.state = {
  bars: [{
    tom1: Array(16).fill('0'),
  }],
}
tom1Click= (i, j) => {
  let bar = this.state.bars.slice();
  if(bar[i].tom1[j] === '1'){
    bar[i].tom1[j] = '0';
  }
  else
    bar[i].tom1[j] = '1';
  this.setState({bars: bar})
}

我的页面中有16个Tom组件，我想当其中之一单击状态值更改为0或1时，但是当我单击Toms之一时，整个状态已更新，整个页面都重新呈现 我应该怎么做才能解决这个问题，当我单击组件时，只需重新渲染该组件

Answer 1

一种更好的方法是让2个组件成为父组件，这将呈现16个子组件，子组件将具有布尔状态，而单击处理程序将具有简单的代码行setState({bar:!this.state.bar});例如。希望对您有帮助！