组件三大属性_state

• 在说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-success" 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强制绑定为组件对象bind
        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) => {
    // 在 React 中，推荐使用 this.setState({ }) 修改 状态值
    this.setState({
        // 在 setState ，只会把 对应的 state 状态更新，而不会 覆盖其它的 state 状态
        msg: '今夜は月が绮丽ですね」'
    }, function () {  // 回调
        console.log(this.state.msg);
    })
}