跳到主要内容
Version: Next

State(状态)

我们使用两种数据来控制一个组件:propsstateprops是在父组件中指定,而且一经指定,在被指定的组件的生命周期中则不再改变。对于需要改变的数据,我们需要使用state

一般来说,你需要在构造函数中初始化state,然后在需要修改时调用setState

假如我们需要制作一段不停闪烁的文字。文字内容本身在组件创建时就已经指定好了,所以文字内容应该是一个prop。而文字的显示或隐藏的状态(快速的显隐切换就产生了闪烁的效果)则是随着时间变化的,因此这一状态应该写到state中。

实际开发中,我们一般不会在定时器函数(setInterval、setTimeout 等)中来操作 state。典型的场景是在接收到服务器返回的新数据,或者在用户输入数据之后。你也可以使用一些"状态容器"比如ReduxMobX来统一管理数据流。在这种情况下,你可以使用 Redux 或 MobX 来修改 state,而不是直接调用setState

每次调用setState时,BlinkApp 都会重新执行 render 方法重新渲染。这里我们使用定时器来不停调用setState,于是组件就会随着时间变化不停地重新渲染。

State 的工作原理和 React 完全一致,所以对于处理 state 的一些更深入的细节,你可以参阅React.Component API。看到这里,你可能觉得我们的例子总是千篇一律的黑色文本,那么我们一起来学习一下样式吧。