在b站尚硅谷学习React过程中,记录的学习笔记,希望能够帮到和我一样的前端热爱者!
还有其他精彩章节,在我的React专栏中!
在class组件使用
setState
① setState(stateChange, [callback])------对象式的setState
1.stateChange为状态改变对象(该对象可以体现出状态的更改)
2.callback是可选的回调函数, 它在状态更新完毕、界面也更新后(render调用后)才被调用
因为react状态更新是异步的,所以如果想看更新后的状态,可以在回调中输出,如下:
this.setState({count:count+1},()=>{
console.log(this.state.count)
})
② setState(updater, [callback])------函数式的setState
1.updater为返回stateChange对象的函数。
2.updater可以接收到state和props。
3.callback是可选的回调函数, 它在状态更新、界面也更新后(render调用后)才被调用。
this.setState((state,props)=>{
return {count:state.count+1}
})
总结:
1.对象式的setState是函数式的setState的简写方式(语法糖)
2.使用原则:
(1).如果新状态不依赖于原状态 ===> 使用对象方式
(2).如果新状态依赖于原状态 ===> 使用函数方式
(3).如果需要在setState()执行后获取最新的状态数据,要在第二个callback函数中读取
lazyLoad
路由组件的懒加载,需要时再引入该路由。
1.通过React的lazy函数配合import()函数动态加载路由组件 ===> 路由组件代码会被分开打包
import React,{ lazy } from 'react'
const Login = lazy(()=>import('@/pages/Login'))
2.通过<Suspense>指定在加载得到路由打包文件前显示一个自定义loading界面
<Suspense fallback={<h1>loading.....</h1>}>
<Switch>
<Route path="/xxx" component={Xxxx}/>
<Redirect to="/login"/>
</Switch>
</Suspense>
关注我,不迷路!
会不定时为大家更新优质内容,欢迎👍🏻+⭐️+☁️!!!方便随时查阅