ReactNative State(状态)

接上篇 ReactNative开发环境配置，ES6语法介绍

ReactNative State(状态)

概念

通俗来讲，一个组件，或者一个视图，他们都是 Component，Component 用两个最重要的东西，一个props

一个state

我们使用两种数据来控制一个组件：props和state。props是在父组件中指定，而且一经指定，在被指定的组件的生命周期中则不再改变。(props就像一个类的初始化属性一样，只有在创建时可以赋值，并且组件内部不可修改，也就是readonly)

对于需要改变的数据，我们需要使用state。也可以把state理解为一个状态机，对于那些需要改变的数据可以使用state来更改，比如网络接口拿回来的数据，可以放在state里，当需要改变的时候只需要调用setState即可

使用

一般来说，你需要在 class 中声明一个state对象，然后在需要修改时调用setState方法。

假如我们有一个弹窗，想要控制弹窗是不是显示，需要一个modalVisible属性，当更改它的值时从而使界面 UI 产生相应的变化

另一种声明方式，声明在类内部，声明的同时，进行初始化

使用this.state.modalVisible来控制组件是否显示

更新组件状态使用

注意点

实际开发中，我们一般不会在定时器函数（setInterval、setTimeout 等）中来操作 state。典型的场景是在接收到服务器返回的新数据，或者在用户输入数据之后。你也可以使用一些“状态容器”比如Redux来统一管理数据流。

每次调用setState时，BlinkApp 都会重新执行 render 方法重新渲染。

render（）中 UI 的变化只有当绑定的 state 中的某个属性变化后，才会变化 一切界面变化都是状态state变化 state的修改必须通过setState()方法 this.state.likes = 100; // 这样的直接赋值修改无效！ setState 是一个 merge 合并操作，只修改指定属性，不影响其他属性 setState 是异步操作，修改不会马上生效

我们可以看到setState内部的声明

如果想要同步使用，我们可以使用第二个参数 callback?它是可选的

参考资料：

官方文档

ES6 延展操作符（...）

typeScriptg 中文文档

ReactNative 入门与进阶

https://docs.nativebase.io