重生之我要当前端大王–react篇 02react setState

重生之我要当前端大王–react篇 02react setState

第二篇章 前端篇–react start！

前言

阅读本章，了解使用react 类组件 setState更新状态的三种写法

在 React 中，setState 是一个用于更新组件状态的方法。当你调用 setState 时，React 会将你提供的新状态合并到当前状态中，然后重新渲染组件。

一、基础写法，传入对象形式

import React, {  PureComponent } from 'react'
export class ReactApp extends PureComponent {
    constructor(){
        super()
        this.state={
            message:'xxm',
            isShow:true
        }
    }
    hangleChange(){
    //传入一个对象，设置要修改的值
        this.setState({
            isShow:!this.state.isShow
        })
    }
  render() {
    const {message,isShow}=this.state
    return (
      <>
      {isShow && <h3>{message}</h3>}
      <button onClick={()=>{this.hangleChange()}}>change</button>
      </>
    )
  }
}

二、传入回调函数，获取旧值

import React, {  PureComponent } from 'react'
export class ReactApp extends PureComponent {
    constructor(){
        super()
        this.state={
            count:0
        }
    }
    hangleChange(){
        this.setState((oldState)=>{
            console.log(oldState)//获取到上一个旧的state
            return {
                count:oldState.count+1
            }
        })
    }
  render() {
    const {count}=this.state
    return (
      <>
      <h3>{count}</h3>
      <button onClick={()=>{this.hangleChange()}}>change</button>
      </>
    )
  }
}

三、 第二个参数传入回调函数，获取更新后的值

import React, {  PureComponent } from 'react'
export class ReactApp extends PureComponent {
    constructor(){
        super()
        this.state={
            count:0
        }
    }
    hangleChange(){
     this.setState((oldState)=>{
        return {
            count:oldState.count+1
        }
     },()=>{
        console.log(this.state.count)//获取到更新后的值
     })
    }
  render() {
    const {count}=this.state
    return (
      <>
      <h3>{count}</h3>
      <button onClick={()=>{this.hangleChange()}}>change</button>
      </>
    )
  }
}

总结

以上介绍了react 类组件使用setState更新数据的三种方法，本文到处结束，你的点赞是我更新的动力