React
类组件的状态数据定义在它的私有属性 state上
读取也是直接从state上读取
class ClassState extends Component{
constructor(){
//1. 调用父类的构造器
super();
//2. 定义状态数据
this.state = {
count:100,
msg:'atguigu'
}
}
render(){
console.log('this.state: ',this.state);
let {count, msg} = this.state;// 先解构在使用
return (
<div>
<h3>Class 类组件 的状态数据的读取</h3>
<p>count: {this.state.count} - {count}</p>
<p>msg: {this.state.msg} - {msg}</p>
</div>
)
}
}
export default ClassState;
import React, {Component} from 'react'
class ClassState extends Component{
// 定义状态的方式二
state = {
count:1001,
msg:'atguigu'
}
render(){
console.log('this.state: ',this.state);
let {count, msg} = this.state;// 先解构在使用
return (
<div>
<h3>Class 类组件 的状态数据的读取</h3>
<p>count: {this.state.count} - {count}</p>
<p>msg: {this.state.msg} - {msg}</p>
</div>
)
}
}
export default ClassState;
1.1修改状态数据及事件回调的this指向问题
this.setState(新的状态对象)
react的事件回调函数的调用者是 window，所以要想让事件回调函数中的this指向当前组件的实例对象，有以下手段：
bind[推荐]：通过bind改变this指向，原理：使用的是render中的this
包裹箭头函数[推荐]：原理：也是使用的render中的this
直接定义成箭头函数[不推荐]：原理：使用的是constructor中的this
import React, {Component} from 'react'
class ClassState extends Component{
// 定义状态的方式二
state = {
count:1001,
msg:'atguigu'
}
addCount(){//
// console.log('addCount this: ', this);
// this.state.count += 1; // 直接给state赋值修改，虽然可以改变状态数据，但是无法触发视图重新渲染【没有触发render函数再调用】
// console.log(this.state.count);
// this.stateState
this.setState({
count: this.state.count + 1
})
/**
* 事件回调函数 this指向问题：
*
* 1. bind
* 2. 包裹箭头函数
*
* 3. 直接定义成箭头函数[不推荐]
*
* 推荐原则：
* 1. 性能：是否多占用了内存空间
* 2. 是否可以传参
*
*/
}
addCount2 = ()=>{
this.setState({
count: this.state.count + 1
})
}
render(){
console.log('render run');
console.log('this.state: ',this.state);
let {count, msg} = this.state;// 先解构在使用
return (
<div>
<h3>Class 类组件 的状态数据的读取</h3>
<p>count: {this.state.count} - {count}</p>
<p>msg: {this.state.msg} - {msg}</p>
<p><button onClick={this.addCount.bind(this)}>count + </button></p>
<p><button onClick={()=>this.addCount()}>count + </button></p>
<p><button onClick={this.addCount2}>count + </button></p>
</div>
)
}
}
export default ClassState;
1.2类组件事件回调的this指向问题
import React, { Component } from 'react'
export default class ClassState extends Component {
state = {
count: 99,
msg: '尚硅谷'
}
constructor() {
super();
this.click3 = this.click3.bind(this);
}
click1() {
// this.setState 运行后会产生两个严重后果
// 1. 状态数据被改变了
// 2. render函数重新调用
// 报错：原因是事件的回调函数是 window调用的，所以this本身在严格模式下是指向undefined
this.setState({
count: this.state.count + 1
})
}
click2(a,b,c) {
// 因为使用bind，使得this用的是render中的this，render中this永远指向当前实例
this.setState({
count: this.state.count + 1
})
}
click3() {
this.setState({
count: this.state.count + 1
})
}
click4(a,b,c) {
// onClick={()=>this.click4()}
// 箭头函数没有自己的this，使用的是render中的this，所以click4中的this指向当前实例
this.setState({
count: this.state.count + 1
})
}
click5 = () => {
// 相当于是在构造函数construtor中执行的，所以使用的是constructor中的this
this.setState({
count: this.state.count + 1
})
}
render() {
console.log('render run');
let { count, msg } = this.state;
return (
<div>
<p>count : {count}</p>
<p>msg : {msg}</p>
<p><button onClick={this.click1}>count+ 有问题的</button></p>
<p><button onClick={this.click2.bind(this,1,2,3)}>count + bind </button></p>
<p><button onClick={this.click3}>count + bind + constructor</button></p>
<p><button onClick={() => this.click4(11,22,33)}>包裹箭头函数</button></p>
<p><button onClick={