在说state之前,先介绍一下class创建组件中的构造器:由于 MyComponent 组件,继承了
React.Component
这个父类,所以,自定义的构造器中,必须 调用 super()
,只有调用了 super() 以后,才能使用 this 关键字
class MyComponent extends React.Component {constructor() {super();this.state = {msg: '你看,城南的花都开了,该你熬的也都熬过来了,所也别不高兴了'};// 这个 this.state = {} 就相当于 Vue 中的 data() { return { } }}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.state = {} 就相当于 Vue 中的 data() { return { } }//将新增方法中的this强制绑定为组件对象this.show_1 = this.show_1.bind(this)}render() {return (<div><hr/> <button className="btn btn-suess" 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默认不是组件对象,而是undefined 要将新增方法中的this强制绑定为组件对象bindthis.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) => {// 在 React 中,推荐使用 this.setState({ }) 修改 状态值this.setState({// 在 setState ,只会把 对应的 state 状态更新,而不会 覆盖其它的 state 状态msg: '今夜は月が绮丽ですね」'}, function () { // 回调console.log(this.state.msg);})
}
更多推荐
三大,组件,属性
发布评论