React的state：
1.页面效果
2：代码实现：
import
React
from
'react';
export
default
class
BodyIndex
extends
React.
Component {
constructor(){
super();
//调用基类的所有初始化方法
this.
state={
username:
'tony',
age:
'20'
};
//初始化赋值
}
render() {
setTimeout(()
=>{
//更改state的时候
this.
setState({
username:
'peter',
age:
43});
},
4000)
return (
<
div
>
<
h2
>页面的主体内容
</
h2
>
<
p
>
{this.
state.
username
}
{this.
state.
age
}
</
p
>
</
div
>
)
}
}
总结：
1.state对于模块属于自身属性
2.初始化：this.state={usernmae:'tony'}
3.初始化可以放在构造函数constructor里
4.state:this.setState({username:'peter'})
5.state的作用域只属于当前的类，不污染其他模块
React的Props属性
1.页面效果
2.实现代码：
1.props属于外来属性
2.获取不同页面的值
React的事件与数据的双向绑定：
1.页面效果：
2.代码实现
1.首先定义一个组件
import
React
from
'React';
export
default
class
BodyChild
extends
React.
Component{
render(){
return(
<
div
>
<
p
>子页面输入：
<
input
type=
"text"
onChange=
{this.
props.
handleChildValueChange
}
/></
p
>
</
div
>
)
}
}
2.在bobyIndex.js页面定义事件，详细见代码
React的Prop的验证：
React的Prop的爷孙页面的传值：
1.页面效果
2.代码实现
1.index.js页面
2.bobyindex.js页面
3.bobychild.js页面
React的Refs
1.页面效果
2.代码实现
3：总结
React的Mixins-独立组件间共享
1.页面效果
2.代码实现
