state声明式

发布时间：2022-08-14 文章分类：编程知识 投稿人：李佳 字号： 默认 | 大 | 超大 打印

如何定义state

在类组件 中，在constructor()中使用this.state={}来定义

class A extends Component {
  constructor (props) {
    super(props)  // 调用Component的构造函数
    // 定义state
    this.state = {
      num: 1
    }
  }
}

在函数组件中，自React(16.8)版本以后，使用useState()来定义。

function B (props) {
  // 定义state声明式变量
  let [num, setNum] = useState(1)
}

如何使用state

如何修改state声明式变量

在类组件中，使用this.setState()方法来修改。

class A extends Component {
  constructor (props) {
    super(props)  // 调用Component的构造函数
    // 定义state
    this.state = {
      num: 1
    }
  }
     this.setState(state=>({num: state.num + 1}), ()=>            
    {console.log( this.state.num)})
  }
}

在函数组件中，使用useState()返回值的第二个参数（set*）方法来修改。

function B (props) {
  // 定义state声明式变量
  let [num, setNum] = useState(1)
   const add = () => {
    console.log('1--- num', num)
    // 如果这里是React(V17)中，在合成事件中是异步的，如果在宏任务或    
   Promise.then()是同步的。
    // 如果这里是React(18)，无论在哪里都是异步的。
    // useState()给的这种set*方法，是没有callback的。
    // setNum(num + 1)
    setNum(num => num + 10)
    console.log('2--- num', num)
  }  
}

this.setStaate()的两种写法

this.setState()的异步性

this.setState()自动合并

在同一个函数域中，多个this.setState()会自动合并，以减少没必要的diff运算(协调运算)；自动合并的规则是一种浅合并。

标签 , , , ,