一、setState
1. setState更新狀態的2種寫法
(1). setState(stateChange, [callback])------對象式的setState
1.stateChange爲狀態改變對象(該對象可以體現出狀態的更改)
2.callback是可選的回調函數, 它在狀態更新完畢、界面也更新後(render調用後)才被調用
(2). setState(updater, [callback])------函數式的setState
1.updater爲返回stateChange對象的函數。
2.updater可以接收到state和props。
4.callback是可選的回調函數, 它在狀態更新、界面也更新後(render調用後)才被調用。
總結:
1.對象式的setState是函數式的setState的簡寫方式(語法糖)
2.使用原則:
(1).如果新狀態不依賴於原狀態 ===> 使用對象方式
(2).如果新狀態依賴於原狀態 ===> 使用函數方式
(3).如果需要在setState()執行後獲取最新的狀態數據,
要在第二個callback函數中讀取
2.代碼
1 import React, { Component } from 'react'
2
3 export default class Demo extends Component {
4
5 state = {count:0}
6
7 add = ()=>{
8 //對象式的setState
9 /* //1.獲取原來的count值
10 const {count} = this.state
11 //2.更新狀態
12 this.setState({count:count+1},()=>{
13 console.log(this.state.count);
14 })
15 //console.log('12行的輸出',this.state.count); //0 */
16
17 //函數式的setState
18 this.setState( state => ({count:state.count+1}))
19 }
20
21 render() {
22 return (
23 <div>
24 <h1>當前求和爲:{this.state.count}</h1>
25 <button onClick={this.add}>點我+1</button>
26 </div>
27 )
28 }
29 }
二、lazyLoad
1. 路由組件的lazyLoad
//1.通過React的lazy函數配合import()函數動態加載路由組件 ===> 路由組件代碼會被分開打包
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>