15.5 React 状态(State)
优质
小牛编辑
134浏览
2023-12-01
到目前为止,我们已经使用React作为静态渲染引擎。现在,我们将添加状态使React组件更加动态。 特性(props)和状态(state)之间的主要区别是,状态是内部的并由组件自身所控制,而特性是外部的并由任何渲染组件所操作。 让我们在实例中来看看:
在上述代码中,有3个关键接口:getInitialState
、this.state
和this.setState
。
getInitialState用来初始化组件的状态。
this.state用来访问组件状态,和this.props类似。
this.setState用来设置或更新组件状态,使用包含一组key-values对的对象,未提供的key则不受影响。 当组件的状态发生变化时,将用新的状态调用render方法,UI被更新为新的输出。这种组件状态(数据)和UI之间的动态绑定(Dynamic Bindings),是React状态管理的核心机制。 我们不用在更新状态(数据)的时候再传递一个回调函数然后在该回调中更新UI(想一想我们使用jquery时经常做的那样),React替开发者完成这个任务。
到此,React的一些基本特性已经介绍完毕,我们已经可以使用React来编写一些小应用了。但是我们建议使用一些React应用模板来开始自己的程序,以节约时间。