深入理解React的Virtual DOM

到目前为止，本文只触及了props，React哲学的一部分，但忽略了state。这是一个简单的“有状态”组件：

class App extends Component {  
  state = { counter: 0 }  
  increment = () => this.setState({  
    counter: this.state.counter + 1,  
  })  
  render = () => (<button onClick={this.increment}>  
    {'Counter: ' + this.state.counter}  
  </button>)  
} 

现在，上述例子中的state对象有一个counter属性。单击按钮会增加其值并更改按钮文本。但是当用户点击时，DOM会发生什么？它的哪一部分将被重新计算和更新？

调用this.setState也会导致重新渲染，但不会导致整个页面重渲染，而只会导致组件本身及其子项。父母和兄弟姐妹都可以幸免于难。

修复问题

本文准备了一个DEMO，这是修复问题前的样子。你可以在这里查看其源代码。不过在此之前，你还需要安装React Developer Tools。

（编辑：晋中站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!