React的状态state

在React中，状态和属性都可以实现数据动态化

* 状态 state

在react中，组件内部的数据是通过state来实现和管理

可以理解为state就是Vue中的data函数式组件没有自己的state

我们之前使用变量，都是脱离了组件本身，正确来说，组件自身是应该具有私有和独立的数据（状态）的，这个私有的数据和状态就叫做 state，以后，只要说到数据的状态 那么就是指state

1. state的声明和使用

在类组件中，state的声明分为两种方式

类属性的方式声明 class Person extends Component { // 1 声明 state state = { date: "2008", msg: "类属性的方式声明" } render() { return ( <div> {/* 2 使用state */} <h1>{this.state.date}</h1> <h2>{this.state.msg}</h2> </div> ) } }

2.构造函数中声明

class Person extends Component { // 1 构造函数中 声明 state constructor() { // 1.1 必须在this之前调用super()方法 super(); this.state = { date: "2008", msg: "构造函数中声明" } } render() { return ( <div> {/* 2 使用state */} <h1>{this.state.date}</h1> <h2>{this.state.msg}</h2> </div> ) } }

2. state的赋值

state的赋值方式通过 this.setState方法 来实现

需要注意的是， 不能 使用 this.state.date= 100 直接修改

class Person extends Component { state = { date: 2008 } // 2 事件的声明 要使用箭头函数 handleClick = () => { // 3 获取state中的日期 let { date } = this.state; // 4 修改state中的日期 this.setState({ date: date + 1 }); } render() { return ( // 1 绑定事件 事件名必须驼峰命名 <div onClick={this.handleClick}> <h1>{this.state.date}</h1> </div> ) } }

3. state的赋值是异步的

react为了优化性能，将state的赋值代码 改成异步的方式，可以避免反复的设置state而引发的性能损耗问题。

看看下面打印的值

class Person extends Component { state = { date: 2008 } handleClick = () => { let { date } = this.state; // 1 修改state中的日期 增加 1000 this.setState({ date: date + 1000 }); // 2 看看这个date是多少 console.log(this.state.date); } render() { return ( <div onClick={this.handleClick}> <h1>{this.state.date}</h1> </div> ) } }

有时候，我们希望在一设置值的时候，就希望马上得到最新的state的值，那么可以将代码改为下列的写法

给setState添加一个回调函数，回调中可以获取到修改后的state的值

class Person extends Component { state = { date: 2008 } handleClick = () => { let { date } = this.state; // 添加一个回调函数 this.setState({ date: date + 1000 }, () => { // date的值为 3008 console.log(this.state.date); }); } render() { return ( <div onClick={this.handleClick}> <h1>{this.state.date}</h1> </div> ) } }

有时候，setState还可以接收一个函数，函数内可以实时获取state中的值，不存在延迟

this.setState(preState => { console.log("上一次的state", preState.date); return { date: preState.date + 1000 } }) this.setState(preState => { console.log("上一次的state", preState.date); return { date: preState.date + 1 } })