setState和lazyLoad懒加载

1. setState和lazyLoad懒加载

1.1 setState

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函数中读取

例子

class Demo extends Component {

    state = {count:0}

    add = () => {
        /*
        // 对象式的setState
        // 1.读取原来的count值
        const {count} = this.state
        // 2.更新状态(异步)
        this.setState(
            {count: count+1},
            // 此回调函数是在状态更新完render之后调用
            ()=>{
                console.log('调setState后的输出', this.state.count)  // 1
            })
        // console.log('调setState后的输出', this.state.count)  // 0
        */

        // 函数式的setState
        this.setState(
            (state,props)=>({count:state.count+1}),
        )

    }

    render() {
        return (
            <div>
                   <h2>当前求和为：{this.state.count}</h2>
                    <button onClick={this.add}>点我+1</button>
            </div>
        );
    }
}

1.2 lazyLoad懒加载

懒加载是为了提升性能，在你点击点击某个组件的时候才给你加载组件，而不是一开始刷新就将所有的组件都加载出来。就是需要的时候才加载。

import React, {Component,lazy,Suspense} from 'react';
import {NavLink, Route} from "react-router-dom";

//1.通过React的lazy函数配合import()函数动态加载路由组件 ===> 路由组件代码会被分开打包
const About = lazy(()=>import('./About'))
const Home = lazy(()=> import('./Home'))

class Demo extends Component {
    render() {
        return (
            <div>
                <div>
                    <div className="row">
                        <div className="col-xs-offset-2 col-xs-8">
                            <div className="page-header"><h2>React Router Demo</h2></div>
                        </div>
                    </div>
                    <div className="row">
                        <div className="col-xs-2 col-xs-offset-2">
                            <div className="list-group">
                                {/*原生html中，靠a标签跳转不同的页面*/}
                                {/*<a className="list-group-item active" href="./about.html">About</a>*/}
                                {/*<a className="list-group-item" href="./home.html">Home</a>*/}

                                {/*原生React中，靠路由链接实现切换组件---编写路由链接*/}
                                <NavLink className="list-group-item" to='/about'>About</NavLink>
                                <NavLink className="list-group-item" to='/home'>Home</NavLink>

                            </div>
                        </div>
                        <div className="col-xs-6">
                            <div className="panel">
                                <div className="panel-body">
                                    {/*2.通过<Suspense>指定在加载得到路由打包文件前显示一个自定义loading界面*/}
                                    <Suspense fallback={<h1 style={{backgroundColor:'gray',color:'orange'}}>Loading</h1>}>
                                        {/*  注册路由  */}
                                        <Route path='/about' component={About}/>
                                        <Route path='/home' component={Home}/>
                                    </Suspense>

                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        )
    }
}