我知道状态允许我们创建动态和交互的组件,但我想深入了解状态.
有人可以帮助我使用现实生活中的例子了解React中的状态吗?
解决方法
import React from 'react'; class App extends React.Component { state = { count: 0 }; render() { return ( <div> <h1>Hello world</h1> <h2>Count: {this.state.count}</h2> <button onClick={() => this.setState(state => ({ count: state.count + 1 }))} > + </button> <button onClick={() => this.setState(state => ({ count: state.count - 1 }))} > - </button> </div> ); } } export default App;
在上面的代码中,它有一个state属性/ state:count.
状态可以简单地理解为特定组件/应用程序的那个时间点的值.在上面的示例中,当应用程序首次运行时,应用程序的状态计数为=== 0
我们可以看到有两个按钮 – 使用this.setState更新值,它只是更新应用程序的计数“状态”,每当状态发生变化时应用程序将重新呈现