1. setState
setState
更新状态其实有两种写法
setState这个方法在调用的时候是同步的,但是引起React的状态更新是异步的
【React状态更新是异步的】
1.1 对象式
setState(stateChange, [callback])
stateChange
为状态改变对象 (该对象可以体现出状态的更改)callback
是可选的回调函数, 它在状态更新完毕、界面也更新后(render
调用后)才被调用【异步更新后调用,可以拿到更新后的状态的值】
【例子】
之前一直写的,就是直接传一个对象
this.setState({ count: this.state.count+1 })
1.2 函数式
setState(updater, [callback])
updater
为返回stateChange
对象的函数【返回值是对象】updater
可以接收到state
和props
callback
是可选的回调函数, 它在状态更新、界面也更新后(render
调用后)才被调用【和对象式是一样的】
【例子】
传的时候回调函数,可以接收到state和props,函数的返回值是设置状态的对象
setState(state => ({count: state.count+1}))
1.3 总结
- 对象式的
setState
是函数式的setState
的简写方式【语法糖】 - 使用原则
- 如果新状态不依赖于原状态【使用对象方式】
- 如果新状态依赖于原状态 【使用函数方式】
- 如果需要在
setState()
执行后,获取最新的状态数据,可以在第二个callback
函数中读取到异步更新的最新值
2. 路由组件的懒加载 lazyLoad
用的时候才加载,一般是路由组件进行懒加载
如果不用路由懒加载,页面在第一次进入的时候,就请求了所有组件的数据,如果组件过多,过多的请求这就没有必要了,应该是用户按哪个链接再请求哪个组件
- 通过React的
lazy
函数配合import()
函数动态加载路由组件【路由组件代码会被分开打包】 - 通过
<Suspense>
指定在加载得到路由打包文件前显示一个自定义loading界面
import React, { Component, lazy, Suspense} from 'react'
import {NavLink,Route} from 'react-router-dom'
// import Home from './Home'
// import About from './About'
import Loading from './Loading'
const Home = lazy(()=> import('./Home') )
const About = lazy(()=> import('./About'))
export default class Demo extends Component {
render() {
return (
<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">
{/* 在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">
<Suspense fallback={<Loading/>}>
{/* 注册路由 */}
<Route path="/about" component={About}/>
<Route path="/home" component={Home}/>
</Suspense>
</div>
</div>
</div>
</div>