javascript - 为什么当我更改状态时整页更新？

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，但是当我单击其中一个 Tom 时，整个状态都会更新并且整个页面会重新呈现 我应该怎么做才能处理这个问题，当我点击组件时，只是那个组件重新渲染

Answer 1

完成这项工作的更好方法是有 2 个组件，一个父组件将呈现 16 个子组件，子组件将具有 bool 状态和一个点击处理程序，该处理程序将具有简单的代码行 setState( {bar:!this.state.bar}); 例如。希望对您有所帮助!