React数据传递-state

React中跟数据有关系的就三个东西：state、props、context。我们可以叫做数据传递三兄弟。

4.1 组件自己身上的属性值变化，不会引起视图改变

我们可以在组件的类定义里面写constructor构造器，里面定义this.a=100.表示给组件的实例绑定一个a属性，值是100.

在jsx中使用的时候，直接{this.a}即可。



我们增加一个按钮，试着让用户点击按钮之后，a的值变化



注：为什么使用bind绑定this



通过案例学习了：

（1）绑定监听使用了onClick,onMousedown,onMouseenter,onBlur,把on后面的字母大写，React会自动识别React事件。

（2）绑定监听函数的时候，this上下文是有问题的，所以需要使用bind()方法来设置上下文

（3）绑定监听函数的时候，注意使用{ }而不是""

  <input type="button" value="点击"onClick={(this.add).bind(this)}/>

但有一个问题就是浏览器页面中的a值没有变化，但是控制台上的变化了





所以React中，组件自己的属性的变化不会引发视图的变化！！

4.2 闭包中的值的变化，不会引起视图的变化



闭包中的值变化，也不会引起视图中的值的变化

注：上面箭头的用意



4.3三兄弟之一：state

React把组件看成是一个状态机（State Machines）。通过与用户的交互，实现不同状态，然后渲染UI用户界面和数据保持一致

React里，只有更新组件的state，然后根据新的state重新渲染用户界面（不要操作DOM）



只有更新三兄弟，才会引发Virtual DOM的改变，从而改变DOM

注：关于this的总结：

this的本质就是：this跟作用域无关的，只跟执行上下文有关，也就是当时的实例对象

定义state：

在构造函数中使用this.state属性即可

使用state：在JSX中{this.state.a}

改变state：this.setState({a:this.state.a+1});    不能写++,因为state属性值只读

state是内部的（所以也叫local state），只有组件自己能改变自己的state，别人想改变自己的state，都不可能

后面要介绍Redux架构，所有组件自己的state越来越少用了，而是变为了Redux中的state，不要混淆