组件三大属性

在说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/>&emsp;<button className="btn btn-suess" onClick={this.show_1}>show_1( ) bind强制绑定this</button>&emsp;<button className="btn btn-info" onClick={() => {this.show_2();}}> show_2( ) 箭头函数</button>&emsp;<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);})
}