react入门（三）——state

state

react中的state，存储着我们用的数据，react的思想就是尽量少操作dom而去通过改变数据改变dom。

怎么定义state？

定义state有两种方式：

• 定义在constructor上，代码如下

class Component extends React.Component {
	constructor (props) {
		super(props);
		this.state = {
			key: 'value'
		}
	}
}

大家需要注意的就是在class的constructor中必须在首行调用super方法，意味继承父类的函数。若不写constructor，默认情况下会自动补全一个没有参数的constructor。

• 定义成一个静态属性

class Component extends React.Component {
	state = {
		key: 'value'
	}
}

上述的两种方法，都有一个核心的知识点就是将state定义在组件对象this上，而不是将其定义在组件类Like上，与之类似的还有propTypes和defaultProps等，不过后两个使用static修饰。
我们在组件方法里面调用的时候，使用this.state进行取值。为了方便我建议大家用ES6的对象的解构赋值，这样更加简明。

例子

<script type="text/babel">
    /**
     * 需求： 自定义组件，功能说明如下
     * 1. 显示h2标题，初始化文本为：你喜欢我，
     * 2. 点击文本更新为：我喜欢你
     * 在react中通过改变state可以实现页面的同步改变（diff算法更新虚拟DOM进而更新局部的页面）
     */
        //定义组件
    class Like extends React.Component {
        constructor(props) {
            super(props);
            this.state = {
                isLikeMe: false,
                likeMe:'ues'
            };
            this.handleClick = this.handleClick.bind(this)
        }

        //重写组件内的方法
        render() {
            //读取状态
            const {isLikeMe} = this.state;
            return <h2 onClick={this.handleClick}>{isLikeMe ? `你喜欢我` : `我喜欢你`}</h2>
        }

        //自定义的方法：内部的this默认不是组件对象，而是undefined
        /*
            要将this绑定为组件对象有三种途径：
            1. onClick事件内使用箭头函数触发事件，效率最高的一种，因为箭头函数没有自己的this，他会找使用对象时所在的对象
            2. onClick事件内使用bind强制绑定this（与下面的不同，这个只有在触发的时候才会绑定this，每触发一次就会重新band，会多次触发，效率低）
            3. 在constructor内部使用this.xxx = this.xxx.bind(this)（因为在constructor内部的所有代码都会在使用的时候执行，只会触发一次）
         */
        handleClick() {
            //得到原有的状态并取反
            const {isLikeMe} = this.state;
            //更新状态，通过setState改变，不能通过this.state改变，因为this.state是只读的
            this.setState({isLikeMe: !isLikeMe})
        }
    }

    //渲染组建标签

    ReactDOM.render(<Like/>, document.getElementById('test'))
</script>

 大家特别需要的注意的是，this.state是个只读属性，也就是说你不能直接通过this.state改变组件类的状态，要通过react提供的一个方法this.setState进行修改。
 this.setState 接收一个对象，他的原理和Object.assign类似，都是将传过来的对象和state对象进行合并。
下一章我会带大家详细地理解props