React(6)-类组件的setState异步问题

最新推荐文章于 2024-07-26 20:46:33 发布

卷心菜007

最新推荐文章于 2024-07-26 20:46:33 发布

阅读量806

点赞数

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

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

版权

React 专栏收录该内容

23 篇文章 1 订阅

订阅专栏

<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">

//同步

function sum(a,b){

return a+b

                }

var result = sum(1,2)

console.log(result) //输出3

//异步

function sum(a,b){

setTimeout(()=>{

return a+b

                        },0)

//没有明确return返回内容时,return undefined

                }

var result = sum(1,2)

console.log(result) //输出undefined

//异步解决方案

1.callback回调函数解决异步

给函数参数传递一个函数，这个函数在指定的时机去执行,就是回调函数

function sum(a,b,callback){

setTimeout(()=>{

let result = a + b

callback(result)

                        },0)

                }

//定义回调函数

function callback(result){

console.log("callback函数",result) //通过回调函数拿到真实的结果

                }

sum(1,2,callback)

                //扩展：callback嵌套多层使用会导致回调地狱

                var result = sum(1,2,result)

console.log(result) //输出undefined,返回值没有意义

2.Promise解决异步

                function sum(a,b){

return new Promise((resolve,reject)=>{

          setTimeout(()=>{

          let result = a + b

resolve(result)

                                },0)

                        })

                }

sum(1,2)

.then((result)=>{

console.log("promise",result)

                })

.catch((err)=>{

connsole.log(err)

                }) //输出 promise　

//setState异步的解决方案

class App extends React.Component{

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

handleClick = () = {

1 setState异步不能直接获取结果

var result = this.setState({a:1})

console.log(result) //打印：undefined,异步拿不到

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

console.log("callback",this.state.a) //可以拿取到数值

                                })

2 setState依赖问题+异步解决

//setState(obj,callback)

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

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

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

//这时,setState异步修改已经执行完毕,修改state,修改数据

//不是通过参数的方式修改的数据,是通过时机

console.log("callback",this.state.a) //打印 callback 4

                                })

                        }

//Promise.then方法解决异步

handleClickAsync=()=>{

this.setStatePromise({a:1})

.then(()=>{

//注意：resolve不是通过参数来获取返回值

console.log("promise获取值:",this.state.a)

                                })

.catch(err=>{

console.log(err)

                                })

}

//async await方法解决异步

                        handleClickAsync = async()=>{

//注意：await必须在async函数中使用

await this.setStatePromise({a:1})

console.log(this.state.a) //打印：1



var result = await this.setStatePromise({a:1})
console.log(result) //打印结果为：undefined

await this.setStatePromise(

(perState,props)=>{

rerurn {a:preState.a + 2}

                                        }

                                )

await this.setStatePromise(

(perState,props)=>{

rerurn {a:preState.a + 2}

                                        }

                                )

console.log(this.state.a) //打印结果为：4

try{

await this.setStatePromise(10)

consoel.log(this.state.a)

                                }catch(error){

console.log("捕获错误：",error)

                                }

                        }

setStatePromise(newState)=>{

return new Promise((resolve,reject)=>{

if(typeof newSate === "object" || typeof newState === "function"){

this.setState(newState,resolve())

                                        }else{

reject("setStatePromise 参数只能是对象或者函数")

                                        }

                                })

                        }



                        render(){

return(

<div>

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

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

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

<button onClick="this.handleClick">button</button>

                                                <buttononClick="this.handleClickAsync">

                                                        buttonAsync

                                                </button>

                                        </div>

                                )

                        }

                }





class App extends React.Component{

render(){



                        }

                }

ReactDOM.render(<App />,document.getElementById("app"))

</script>

</body>

卷心菜007

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
React(6)-类组件的setState异步问题

//异步解决方案 1.callback回调函数解决异步 2.Promise解决异步 //setState异步的解决方案 3.1 setState异步不能直接获取结果 3.2 setState依赖问题+异步解决
复制链接

扫一扫