React State & setState()
- 函数组件:无状态(无 state)组件,即主要负责数据展示–>静
- class组件:有状态(有 state)组件,即主要负责更新 UI–>动
- 状态 即 数据
state
的值是对象{}
,且为私有对象
01 基本用法
import React, { Component } from 'react';
class learnState extends Component {
// 在constructor中若需要获取到props ,就必须要在constructor和super的参数里面写上props
// 注意:只要使用了constructor()就必须写super(),否则会导致this指向错误。
constructor(props) {
// 必须必
super(props);
// 初始化state
this.state = {
count: 0,
};
}
export default learnState;
02 简化用法
import React, { Component } from 'react';
class learnState extends Component {
// 简化写法
state = {
count: 0,
};
export default learnState;
03 获取状态
this.state.属性名;
// 方式 1 直接调
const countTest = this.state.count;
// 方式 2 解构
const { count } = this.state;
04 关于 setState()
- 不要直接修改 State
- 错误示范:下面的代码不会重新渲染组件:
this.state.text = 'Hello';
- 正确示范:应该使用
setState()
。(注意:构造函数是唯一可以给this.state
赋值的地方!)
this.setState({ text: 'Hello' });
- State 的更新可能是异步的
出于性能考虑,React 可能会把多个setState()
调用合并成一个调用。因为this.props
和this.state
可能会异步更新,所以你不要依赖他们的值来更新下一个状态
- State 的更新会被合并
当你调用 setState() 的时候,React 会把你提供的对象合并到当前的 state。
05 事件处理程序
- 解决事件绑定
this
指向:- 在事件处理的地方直接使用箭头函数(this 指向外部环境)
- es5 中的 bind 方法,将 this 与实例绑定,即在
constructor()
里进行绑定,eg:this.onClick=this.onClick.bind(this)
- 利用箭头函数的 class 实例方法(推荐)
import React, { Component } from 'react';
class learnState extends Component {
constructor(props) {
// 必须必
super(props);
// 初始化state
this.state = {
count: 0,
};
}
// 事件处理程序中的this为undefined,所以直接用箭头函数能够很好的解决
onClickByCount = (count) => {
console.log(this);
count++;
// 修改state,更新ui----数据驱动视图
this.setState({ count });
// 上面的命令等效于this.setState({ count:count });
};
onClick = () => {
const { count } = this.state;
count++;
// 修改state,更新ui----数据驱动视图
this.setState({ count });
// 上面的命令等效于this.setState({ count:count });
};
render() {
// 从state里解构出来count
const { count } = this.state;
return (
<>
// 直接给事件传count值
<div onClick={() => this.onClickByCount(count)}>计数器01:{count}</div>
// 不给事件传值,直接在事件处理程序中获取state里面的值
<div onClick={() => this.onClick()}>计数器02:{count}</div>
</>
);
}
}
export default learnState;