【React】拓展 - setState - 路由组件懒加载 - Hooks - Fragment - Context - PureComponent - 插槽 - 错误边界 - 组件通信方式总结

1. setState

setState更新状态其实有两种写法
setState这个方法在调用的时候是同步的，但是引起React的状态更新是异步的
【React状态更新是异步的】

1.1 对象式

setState(stateChange, [callback])

1. stateChange为状态改变对象 (该对象可以体现出状态的更改)
2. callback是可选的回调函数, 它在状态更新完毕、界面也更新后(render调用后)才被调用【异步更新后调用，可以拿到更新后的状态的值】

【例子】
之前一直写的，就是直接传一个对象

this.setState({
    count: this.state.count+1 })

1.2 函数式

setState(updater, [callback])

1. updater为返回stateChange对象的函数【返回值是对象】
2. updater可以接收到state和props
3. callback是可选的回调函数, 它在状态更新、界面也更新后(render调用后)才被调用【和对象式是一样的】

【例子】
传的时候回调函数，可以接收到state和props，函数的返回值是设置状态的对象

setState(state => ({
   count: state.count+1})) 

1.3 总结

1. 对象式的setState是函数式的setState的简写方式【语法糖】
2. 使用原则
   1. 如果新状态不依赖于原状态【使用对象方式】
   2. 如果新状态依赖于原状态 【使用函数方式】
   3. 如果需要在setState()执行后，获取最新的状态数据，可以在第二个callback函数中读取到异步更新的最新值

2. 路由组件的懒加载 lazyLoad

用的时候才加载，一般是路由组件进行懒加载
如果不用路由懒加载，页面在第一次进入的时候，就请求了所有组件的数据，如果组件过多，过多的请求这就没有必要了，应该是用户按哪个链接再请求哪个组件

1. 通过React的lazy函数配合import()函数动态加载路由组件【路由组件代码会被分开打包】
2. 通过<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>
            <