React---新擴展setState和lazyLoad

一、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>