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

在这里重点学习下state和props~~~~~做笔记真不容易呀。

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

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

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

通过案例学习：

1、绑定了监听使用onClick, onMousedown. onMouseenter, onBlur,把on后面的字母大写。React会自动识别React时间

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

3、绑定监听函数的时候，注意用{}而不是“”

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

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

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

state

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

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

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

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

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

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

state是内部的(所以也叫做loacal state)，只有组件自己才能改变自己的state,别人想改变自己的state,都不能。

后面要学习Redux架构，所以组件自己的state就是很少用了，而是变为了Redux的state,不要混淆。

props

就是定义在自定义组件标签上面的值，就是props.当props改变，会引发VirtualDOM改变，从而引发视图的重绘。

app/App.js

app/mycompo.js

如果父组件APP想向子组件mycompo传值，那么使用属性

在子组件中不允许更改父亲传过来的属性

子组件mycompo中就可以无脑使用this.props来枚举传入的属性。

需要再构造函数中使用这个值，此时：

如果需要在构造函数中使用这个值，此时系统会将props作为构造函数的第一个参数传入：

在子组件中，props是只读的，不能修改props的值，如果要修改，可以用state来接收。如上图。

---

如果非要从下向上传数据？子组件要吧数据返回给父组件，就是父组件传一个函数给子组件，子组件通过传参数调用函数将数据返回给父组件的函数，父组件的函数接受实参来改变父组件中的state等值。

父组件App现在想让子组件mycompo设置App自己的state.d值，此时就需要传入d值，并且传入一个设置d值的函数到子组件中。

app/App.js

子组件就要接受父组件传来的d的参数和设置d的函数: