React---新扩展setState和lazyLoad

2021年09月15日 阅读数:1
这篇文章主要向大家介绍React---新扩展setState和lazyLoad,主要内容包括基础应用、实用技巧、原理机制等方面,希望对大家有所帮助。

1、setState

1. setState更新状态的2种写法

    (1).  setState( stateChange[callback])------ 对象式的setState
            1.stateChange为状态改变对象(该对象能够体现出状态的更改)
            2.callback是可选的回调函数, 它在状态更新完毕、界面也更新后(render调用后)才被调用
                    
    (2).  setState(updater, [callback])------ 函数式的setState
            1.updater为返回stateChange对象的函数。
            2. updater能够接收到 stateprops
            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 }

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

本文同步分享在 博客“半指温柔乐”(CNBlog)。
若有侵权,请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”,欢迎正在阅读的你也加入,一块儿分享。react