React中传递组件内私有数据--state属性的使用

React中传递组件内部私有数据的属性： state。

与Vue组件中的data(){}相似。

但区别在于——Vue是双向数据绑定，即通过 “this.属性 = newVal” 就可以修改data中的属性、并在页面中响应式显示；而React是单向数据绑定，即通过 “this.属性 = newVal” 只能修改state中数据，但页面仍显示修改前的数据。

下面通过一个 “点击 切换显示晴天/阴天” 的例子介绍一下关于React中的state使用：

1.首先在组件的constructor中通过 this.state={} 初始化状态：

这里放了两个属性，是为了说明 this.state是Object类型，用于保存键值对。

2.在虚拟DOM中读取某一状态值---this.state.isSunny：

3.通过事件监听——通过this.setState({})更新状态、并更新组件界面：

保存+ npm start运行，效果：

点击后，效果：

在右侧React调试工具中可以查看到点击前后，组件的state中 isSunny属性值与组件页面均被更新。