react扩展

-

一、setState的两种用法：

setState是异步的调用，当我们代用过setState后，紧接着打印state的值，发现是更改之前的值。

对象式和函数式

import React, { Component } from 'react'

export default class Demo extends Component {
  state = { count: 0 };
  add = () => {
    // 对象式的setState
    // // setState是异步的
    // // 第二个可选参数是个回调函数，是在值更新后，render调用后再调用
    // this.setState({count: this.state.count+1}, () => {
    //   console.log(this.state.count, '值更改之后'); // 1
    // });
    // console.log(this.state.count, 'this.state.count=='); // 0

    // 函数式的setState
    // 函数的参数可以接受到state和props
    this.setState((state, props) => {
      return { count: state.count+1}
    })

    // 对象式的setState是函数式的简写方式（语法糖）
    // 如果依赖于原来的状态，推荐用函数式的
  }
  render() {
    return (
      <div>
        <h2>当前求和为：{this.state.count}</h2>
        <button onClick={this.add}>点我加1</button>
      </div>
    )
  }
}

二、路由的lazyLoad

懒加载

若果不用懒加载的形式，当项目加载时，会把所有的组件一下加载下来，会导致首次加载的资源很多，首页出现白屏的时间很长

懒加载是调用react中的lazy方法实现路由来加载的，还会用到react中自带的一个组件Suspense，这个组件用来指定组件未加载的时候显示的内容，可以是node节点，可以是组件，不过这个组件不能是懒加载。

import React, { lazy, Suspense } from 'react'
import { NavLink, Route, Routes } from 'react-router-dom'
// import Home from '../Home'
// import About from '../About'
// 懒加载
const Home = lazy(() => import('../Home'))
const About = lazy(() => import('../About'))

export default class Demo extends React.Component {
  render() {
    return (
      <div className="container">
        <div className="main">
          <aside className="aside">
            { /**
             * 编写路由链接
             * 在react中，靠路由连接切换组件
             */}
              <NavLink className="btn" to="/home">home</NavLink>
              <NavLink className="btn" to="/about">about</NavLink>
          </aside>
          <div className="content">
            {/**
             * 注册路由
             */}
             {/* Suspense组件是指定在路由对应的组件未加载之前显示的内容，可以是组件 */}
             <Suspense fallback={<h1>路由为加载之前</h1>}>
                <Routes>
                    <Route path="/home" element={<Home/>}></Route>
                    <Route path="/about" element={<About/>}></Route>
                </Routes>
             </Suspense>
              
              
          </div>
        </div>
      </div>
    )
  }
}

-