组件实例(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>
//三元表达式判断
注意:
-
react当中绑定时间名和css中的属性名一样,需要采取驼峰命名法,如onclick要写为onClick
-
绑定事件的方法要用{ }包起来
showLove( ){
const isYou=this.state.isYou;
//读取当前状态,进行取反
this.setState({isYou:! isYou})
注意:
- state里的数据不能够直接修改,要借助setState(是React.Component里的属性,通过原型链找到)
- 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,则把方法作为实例对象的函数)
(不能直接写箭头函数,必须要先赋值,类似于表示所有实例都具有的属性)