2.react入门之三大核心属性之一state

在学习state之前我们先了解一下class的constructor 方法
有疑惑点这里
在这里我们就简单说一下(只代表个人观点)

  /* constructor  
    一个类必须有constructor 构造方法,如果没有显式定义，一个空的constructor 构造方法会被默认添加
    constructor 构造方法返回实例对象(既当前this)
  */
 
   /*
   react中的constructor 如果不初始化 state 或不进行方法绑定，则不需要为 React 组件实现构造函数。
   react中的构造函数仅用于一下二种情况
   (1).通过给 this.state 赋值对象来初始化内部 state。
   (2).为事件处理函数绑定实例      
    */
     class Dome extends React.Component {
            constructor(props) {
                super(props);
                //先讲第一种
                this.state = { num: 0 }
            }
            handleClick() { }
            // 调用render时  当前this就是实例对象
            render() {
                // render 放在Dome的原型对象上，供实例使用
                let { num } = this.state;
                return (
                    <div>
                        <h1>当前数值为：{num}&nbsp;<span onClick={()=>this.handleClick()}>加一</span></h1>
                    </div>
                );
            }
        }
     ReactDOM.render(<Dome />, document.getElementById('app'));
     //上一章节提过当Dome 组件被render时就会自动帮我们创建一个Dome实例
     /*
	   此时注意看state在constructor里放着,当我们在render函数内通过解构展示时,当前this就是代表着Dome实  例, 那此时我们想要让state中的num加一怎么办呢
	*/
	
	<h1>当前数值为：{num}&nbsp;<span onClick={this.handleClick}>加一</span></h1>
	//注意 在render中this代表着实例对象,因此可以访问通过原型访问handleClick方法 
	//在react中默认开启严格模式,而在调用方法是是赋值语句,(onClick={this.handleClick})此时我们点击按钮时this肯定丢失,所以我们有二中解决方法(1.使用箭头函数,2.使用bind绑定this)
	
	1.第一种方法
	我们可以将this.handleClick改造成箭头函数,如：()=>this.handleClick()直接调用
	再或者将方法写成赋值语句
	handleClick=()=>{}
	2.在constructor中为实例对象添加一个方法,如：this.handleClick = this.handleClick.bind(this);
	以上二种方法均可解决方法中的This问题(在这里我们选用直接调用箭头函数)

在react中规定使用setState方法修改state中的值
因此,此时handleClick方法因该为

handleClick() { 
	this.setState({
		num:this.state.num+1
	})
}

总结：
1.state作为数据状态管理,我们可以在初始状态时为他设置想要的属性
2.this指向问题,目前我所学的只有这两种解决方法均可解决
3.修改state数据一定要使用setState方法修改,直接修改则页面不会更新