15.5 React 状态(State)

组件化和状态管理是React的2个核心功能

到目前为止,我们已经使用React作为静态渲染引擎。现在,我们将添加状态使React组件更加动态。 特性(props)和状态(state)之间的主要区别是,状态是内部的并由组件自身所控制,而特性是外部的并由任何渲染组件所操作。 让我们在实例中来看看:

在上述代码中,有3个关键接口:getInitialStatethis.statethis.setState

getInitialState用来初始化组件的状态。

this.state用来访问组件状态,和this.props类似。

this.setState用来设置或更新组件状态,使用包含一组key-values对的对象,未提供的key则不受影响。 当组件的状态发生变化时,将用新的状态调用render方法,UI被更新为新的输出。这种组件状态(数据)和UI之间的动态绑定(Dynamic Bindings),是React状态管理的核心机制。 我们不用在更新状态(数据)的时候再传递一个回调函数然后在该回调中更新UI(想一想我们使用jquery时经常做的那样),React替开发者完成这个任务。

到此,React的一些基本特性已经介绍完毕,我们已经可以使用React来编写一些小应用了。但是我们建议使用一些React应用模板来开始自己的程序,以节约时间。

你可以在本站搜索React来观摩一些实际用例,并作为你的起步模板。