【React】三大核心属性state

React三大核心属性—state

1.state基本认识

1. state是组件对象最重要的属性, 他是当前类的私有属性，只有在当前组件中才能操作里面的数据，值是对象(可以包含多个key-value的组合)

2. 组件被称为"状态机", 通过更新组件的state来更新对应的页面显示(重新渲染组件)

3. 修改state中的数据不像Vue一样直接进行修改，而是通过 this.setState 方法来修改

2.state基本使用

import React, { Component } from 'react';

class App extends Component {

  // 初始化方式1 
  // state = {
  //   num: 100
  // }

  // 初始化方式2
  constructor(props) {
    super(props);
    this.state = {
      num: 100
    }
  }

  addNum(evt, n = 1) {
   //获取初始数据
   	const num = this.state.num
   //修改state中的数据 
   // this.setState({num:num}) ,此处出发对象的简写形式
    this.setState({num}) 
  }

  render() {
    return (
      <div>
        {/* 在视图中读取state中的数据 */}
        <h3>{this.state.num}</h3>
        <button onClick={evt => this.addNum(evt, 2)}>累加</button>
      </div>
    );
  }
}

export default App;

3.setState更新状态的2种写法

setState异步更新

changeText() {
  this.setState({
    message: "文本已经被改变"
  })
  console.log(this.state.message); // Hello World
}

上面代码中再使用 setState 方法后，再打印 message，发现 message 没有被改变，由此可以看到 setState 是异步操作，在执行完setState之后不能够立刻拿到最新的state的结果

对象式setState

setState(stateChange, [callback])

stateChange：即为改变对象，传入的的是一个对象{key：value}

callback：在上面我们得出结论，setState是异步操作，那么，为了在state中的数据在改变后在拿到state中的数据，那么就需要介绍一下state中的第二个参数，callback是可选的回调函数, 它在状态更新完毕、界面也更新后(render调用后)才被调用

函数式的setState

setState(updater, [callback])

updater：即为返回stateChange对象的函数，可以接收到state和props

callback：同上

总结

1. 对象式的setState是函数式的setState的简写方式(语法糖)
2. 使用原则：

• 如果新状态不依赖于原状态 ===> 使用对象方式
• 如果新状态依赖于原状态 ===> 使用函数方式
• 如果需要在setState()执行后获取最新的状态数据, 要在第二个callback函数中读取