图床项目

发表于
1、Suspense 和 lazy
  • Suspense

React 16.6 新增了 组件，让你可以“等待”目标代码加载，并且可以直接指定一个加载的界面（像是个 spinner），让它在用户等待的时候显示
官方文档

1
2
<Suspense fallback = {<Loading/>}>      //等待加载时显示 Loading组件
</Suspense>
  • React.lazy

动态引入组件

1
2
3
4
5
6
7
8
9
10
//使用前
import Home from './pages/Home'
import History from './pages/History'
import About from './pages/About'

//使用后
import {lazy} from 'react'
const Home = lazy(() => import('./pages/Home'))
const History = lazy(() => import('./pages/History'))
const About = lazy(() => import('./pages/About'))

React.lazy 接受一个函数，这个函数需要动态调用 import()。它必须返回一个 Promise，该 Promise 需要 resolve 一个 default export 的 React 组件。

然后应在 Suspense 组件中渲染 lazy 组件，如此使得我们可以使用在等待加载 lazy 组件时做优

  • 完整代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
import {Suspense, lazy} from 'react'
import './App.css'
import Header from './components/Header'
import Footer from './components/Footer'
import {Switch, Route} from 'react-router-dom'
import Loading from './components/Loading'
import Login from './pages/Login'
import Register from './pages/Register'
// import Home from './pages/Home'
// import History from './pages/History'
// import About from './pages/About'
const Home = lazy(() => import('./pages/Home'))
const History = lazy(() => import('./pages/History'))
const About = lazy(() => import('./pages/About'))
function App() {
	return (
		<>
			<Header/>
			<main>
				<Suspense fallback = {<Loading/>}>
					<Switch>
						<Route path = "/" exact component = {Home}/>
						<Route path = "/history" component = {History}/>
						<Route path = "/about" component = {About}/>
						<Route path = "/Login" component = {Login}/>
						<Route path = "/Register" component = {Register}/>
					</Switch>
				</Suspense>
			</main>
			<Footer/>
		</>
	)
}
export default App

2、mobx

  • @observable 被观察者

    • 类似 Vuex 的 state，声明需要的状态
    • 被观察者可以是：JS 基本数据类型、引用类型、普通对象、类实例、数组和映射

  • action 动作

    用来更改被观察者

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    import {observable, action, makeObservable} from 'mobx'
    import {Auth} from '../models'

    class UserStore {
        @observable currentUser = null

        constructor() {
            makeObservable(this)
        }

        @action pullUser() {
            this.currentUser = Auth.getCurrentUser()
        }

        @action resetUser() {
            this.currentUser = null
        }
    }

    export default new UserStore()

  • observer

    可以将 React 组件转换为可响应 MobX 的组件

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    import React from 'react'
    import {observer} from 'mobx-react'
    import Uploader from '../components/Uploader'
    import Tips from '../components/Tips'
    const Home = observer(() => {
        return (
            <>
                <Tips>请先登录!!</Tips>
                <Uploader/>
            </>
        )
    })
    export default Home

    完整代码见Github