重生之我要当前端大王–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更新数据的三种方法,本文到处结束,你的点赞是我更新的动力