React(5)-类组件的setState

最新推荐文章于 2024-01-31 22:40:02 发布

卷心菜007

最新推荐文章于 2024-01-31 22:40:02 发布

阅读量626

点赞数 1

分类专栏： React 文章标签： react.js javascript 前端

本文链接：https://blog.csdn.net/m0_65912225/article/details/126463589

版权

React 专栏收录该内容

23 篇文章 1 订阅

订阅专栏

//1.直接修改数据，强制刷新

//2.setState():修改数据，触发render

//3.setState是异步的(条件1：在合成事件里面)

//5.多次调用setState()

//6.累加(存在依赖隐患)

//7.setState接受一个函数,解决累加隐患

//8.定时器/延时器

//8-1 setState()在setTimeout setInterval中是同步的

//8-2 setTimeout/setInterval不会合并=>不会批量更新

//8-3 setTimeout/setInterval没有依赖问题

//4.setState是异步的(条件2：在生命周期钩子函数中)

<body>

<div id="app"></div>

<script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>

<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>

<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

<script type="text/babel">

class App extends React.Component{

constructor(props){

super(props)

//状态初始化方法1

this.state = {}

                        }

//状态初始化方法2

state = { a:0,b:0,c:0 }

                        handleClick=>()=>{

console.log(this) //指向组件实例

//1.直接修改数据，强制刷新

this.state.a = 1

                                this.forceUpdate()

//2.setState():修改数据，触发render

this.setState({

a : 1

                                })

//3.setState是异步的(条件1：在合成事件里面)

//先执行输出this.state.a，再执行setState()

this.setState({

a : 1

                                })

console.log(this.state.a) //输出为0

//5.多次调用setState()

//3次调用setState=>render执行一次=>state数据全部修改(批量更新)

//react性能优化,setState不是立即执行的,合并执行

//批量更新的时机是在render之前的某个时候

this.setState({a:1})

this.setState({b:1})

this.setState({c:1})

console.log(this.setState) //{a:0,b:0,c:0}说明=>setState是异步的

//6.累加(存在依赖隐患)

//隐患:调用setState更新的值,依赖于state里面的数据；

//不能依赖于上一个状态去计算下一个状态

//a:1=>setState是异步的,不是立即执行的

this.setState({a:1})

this.setState({a:this.state.a + 1})

this.setState({a:this.state.a + 1}) // 累加结果为1

//因为异步 => 转换

this.setState({a:1})

this.setState({a:1})

this.setState({a:1})

//因为合并 => 转换

    this.setState({a:1})

                                //输出仍然是0 异步问题，获取不到真实修改setState结果

console.log(this.state.a)

//增加参数,获取到真实结果

this.setState({a:this.state.a +1},()=>{

console.log("callback",this.state)

                                })



//7.setState接受一个函数,解决累加隐患

//函数参数：上一个状态preState,props；

//返回值：也是一个对象，也是新的状态，可以依赖于上一个状态做计算

this.setState({a:1}) //a:1

this.setState((preState,props)=>{

return {a:preState.a+1}

                                })

this.setState((preState,props)=>{

return {a:preState.a+1}

                                })

this.setState((preState,props)=>{

return {a:preState.a+1}

                                }) //点击：a:4 累加成功

//原理解析:将执行函数放在队列中执行

[

                                        (preState,props)=>{ {a:preState.a+1} })；

                                        (preState,props)=>{ {a:preState.a+1} })；

                                        (preState,props)=>{ {a:preState.a+1} })；

]

console.log(this.state.a) //输出仍然是0

this.setState((preState,props)=>({a:preState.a+1}),()=>{

console.log("callback",this.state.a)

                                        //通过第二个参数,传递回调函数获取state真实的值

                                })



//8.定时器/延时器

//8-1 setState()在setTimeout setInterval中是同步的

setTimeout(()=>{

console.log(this) //箭头函数=>指向handleClick作用域=>组件实例

this.setState({ a:1 })

console.log(this.setState.a) //打印:1,说明此处serState不是异步的

                                },1000)

setInteval(()=>{

console.log(this) //箭头函数=>指向handleClick作用域=>组件实例

this.setState({ a:1 })

console.log(this.setState.a) //打印:1,说明此处serState不是异步的

                                },1000)

//8-2 setTimeout/setInterval不会合并=>不会批量更新

setTimeout(()=>{

this.setState({a:1});

console.log(this.state.a)

this.setState({b:1});

console.log(this.state.b)

this.setState({c:1});

console.log(this.state.c)

                                },1000)

  //8-3 setTimeout/setInterval没有依赖问题

setTimeout(()=>{

this.setState({a:1})

this.setState({a:this.state.a + 1})

this.setState({a:this.state.a + 1})

console.log(this.state.a)

                                })

                        }

//render必须实现

render(){

console.log("render")

//render函数中必须有return

return(

<div>

<h1>a:{this.state.a}</h1>

<h1>b:{this.state.b}</h1>

<h1>c:{this.state.c}</h1>

{/*合成事件(事件包装):onClick onChange(事件代理委托)*/}
<button onClick = {this.handleClick}>button1</button>

                                        </div>

                                )

                        }

//第一次挂载完毕自动执行

componemtDidMount(){

console.log("componemtDidMount")

//4.setState是异步的(条件2：在生命周期钩子函数中)

this.setState({

a : 1

                                })

console.log(this.state.a) //输出为：0

                        }

                }



ReactDOM.render(e,document.getElementById("app"))

</script>

</body>

卷心菜007

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
React(5)-类组件的setState

//1.直接修改数据，强制刷新 //2.setState():修改数据，触发render //3.setState是异步的(条件1：在合成事件里面) //5.多次调用setState()
复制链接

扫一扫