- 在说state之前,先介绍一下class创建组件中的构造器:由于 MyComponent 组件,继承了
React.Component
这个父类,所以,自定义的构造器中,必须 调用 super()
,只有调用了 super() 以后,才能使用 this 关键字
class MyComponent extends React.Component {
constructor() {
super();
this.state = {
msg: '你看,城南的花都开了,该你熬的也都熬过来了,所也别不高兴了'
};
}
render() {
return (
<div><h3>{this.state.msg}</h3></div>
);
}
}
ReactDOM.render(<MyComponent/>, document.getElementById('app'))
- state是组件对象最重要的属性, 值是对象(可以包含多个数据)
- 新添加的方法:内部的this默认不是组件对象,而是undefined ,要将新增方法中的this强制绑定为组件对象bind或者使用箭头函数(箭头函数没有自己的this, 它的this是继承而来)
- 下面的代码中,show_1( )方法展示了 bind强制绑定this为组件对象, show_2( )方法,show_3( )方法则使用了箭头函数
class MyComponent extends React.Component {
constructor() {
super();
this.state = {
msg: '你看,城南的花都开了,该你熬的也都熬过来了,所也别不高兴了'
};
this.show_1 = this.show_1.bind(this)
}
render() {
return (
<div>
<hr/>
 
<button className="btn btn-success" onClick={this.show_1}>show_1( ) bind强制绑定this</button>
 
<button className="btn btn-info" onClick={() => {
this.show_2();
}}> show_2( ) 箭头函数
</button>
 
<button className={['btn', 'btn-danger'].join(' ')} onClick={this.show_3}>show_3( ) 箭头函数</button>
<hr/>
<h3>{this.state.msg}</h3>
</div>
);
}
show_1() {
this.setState({
msg: '独自走在繁华的都市,擦身而过的是熙熙攘攘的人群。路灯拉长孤独的身影,热闹都是旁人的,你总是一个人...'
})
}
show_2 = () => {
this.setState({
msg: '寒来暑往 秋收冬藏 希望我们来日方长'
})
};
show_3 = () => {
this.setState({
msg: '今夜は月が绮丽ですね」'
})
}
}
- 在 Vue 中,默认提供了
v-model
指令,可以很方便的实现 数据的双向绑定
; - 但是,在 React 中,默认只是
单向数据流
,也就是 只能把 state 上的数据绑定到 页面,无法把 页面中数据的变化,自动同步回 state ; 如果需要把 页面上数据的变化,保存到 state,则需要程序员手动监听onChange
事件,拿到最新的数据,手动调用this.setState({ })
更改回去; - 注意:
this.setState
方法的执行,是异步的;如果调用完 this.setState
之后,又想立即拿到 最新的 state
值,需要使用 this.setState({}, callback)
show_3 = (arg) => {
this.setState({
msg: '今夜は月が绮丽ですね」'
}, function () {
console.log(this.state.msg);
})
}