React:组件实例的三大属性：state

组件实例（class组件)的三大属性

hooks可以使函数式组件也拥有着类组件的三大属性

state

标准理解写法

案例：设置一个组件，“我的爱人是你”，使得点击后变为“我的爱人不是你”，再次点击后变为“我的爱人是你”,诸如此类进行——设置一个状态表明爱人是不是你，设置一个方法点击后让状态取反（状态则可以用state进行设置布尔值）

• 初始化状态：

class Lover extends React.Component{
constructor(pros){
super(props)
this.state={isYou:false,asking:'你呢？’}

此处asking为演示state可以有多个而用

• 在render里进行虚拟dom操作

render( ){
const{isYou,asking}=this.state;
//解构赋值，分别读取出数据

return <h1 onClick={this.showLove}>我的爱人{isYou?'是你':'不是你’}，{asking}</h2>
//三元表达式判断

注意：

1. react当中绑定时间名和css中的属性名一样，需要采取驼峰命名法,如onclick要写为onClick

2. 绑定事件的方法要用{ }包起来

showLove( ){
const isYou=this.state.isYou;
//读取当前状态，进行取反
this.setState({isYou:! isYou})

注意：

1. state里的数据不能够直接修改，要借助setState(是React.Component里的属性，通过原型链找到）
2. setState的更新是合并更新，如state里的属性同名则复写，不同名的ren然存在，如案例中的asking仍然存在

需要注意的this指向问题

按照上述代码run起来发现并没有实现想要的功能，其原因就是this指向的问题没有得到妥善的解决。

上图中render里onclick绑定的函数this.showlove并没有得到调用，原因是因为按照上面的代码写法，生成的实例对象上并没有showlove函数，只能通过类的对象沿着原型链去寻找，找到了showlove函数，把此函数交给onclick进行回调，从堆里面把函数拉出来直接执行，回调函数的this指向为window,再加上babel自动开启严格模式和类之中定义的方法自动开启严格模式，所以这里的this 指向为undefined。

解决：

class Lover extends React.Component{
constructor(pros){
super(props)
this.state={isYou:false,asking:'你呢？’}
this.showlove=this.showlove.bind(this);

• bind方法返回一个新函数，bind使得实例对象通过原型链上查找，使得自身得到了一个方法showlove，所以后续onclick调用的方法则为实例对象自身的方法。

• 也可以写为
  this.showlittlelove=this.showlove.bind(this);
  则实例对象身上的showlittlelove方法为从原型链得到的但是this指向为自己的新方法，即实例对象自己身上所具有的方法，与此同时onclick中绑定的方法也应该是showlittlelove。

简单写法（通用写法）

class Lover extends React.Component{
state={isYou:false,asking:'你呢？'} 
 render(){
 const{ isYou,asking}=this.state;
 return <h1 onClick={this.showlove}....//省略

• 初始化语句：在类中直接初始化赋值语句，来表示所有实例都具有的属性，即为上图中的state

showlove=( )=>{
const isYou=this.state.isYou;
this.setState({isYou:!isYou})}

• 自定义方法：赋值语句+箭头函数
  （因为箭头函数没有this，他把外侧函数的this作为箭头函数的this,则把方法作为实例对象的函数）
  （不能直接写箭头函数，必须要先赋值，类似于表示所有实例都具有的属性）