关于前端:项目记录-goodpic-图床工具

预览链接：https://oliver-ysq.github.io/…
代码地址：https://github.com/Oliver-Ysq…

React：base 技术框架
React-Router：路由治理
Mobx6：全局数据管理
styled-component：css in js 解决方案
antd：组件库
leancloud：阿里 serverless 解决方案

反对用户的注册和登录
反对 png/jpg/gif/svg 格局的、大小在 1MB 以内的图片文件的上传
反对图库的治理（包含查看和删除）
图库反对动静（分步）滑动加载。
应用 @media 作挪动端适配。

懒加载
按需加载组件，避免一次性加载全副组件带来的卡顿。

import {Suspense, lazy} from "react";
...
const Home = lazy(()=>import("./pages/component/Home"))
const About = lazy(()=>import("./pages/component/About"))

jsx:
<Suspense fallback={<Loading />}>   {/* 异步加载 */}
    <Switch>
        <Route path='/' exact component={Home}/>
        <Route path='/about' exact component={About}/>
        <Route path='/history' exact component={History}/>
    </Switch>
</Suspense>

styled-components

根本应用

import styled from "styled-components"
const MyHeader = styled.header` // 生成一个带有如下款式的 <header></header> 标签
    color: red;
`

export default function component(){
    return(<MyHeader>welcome</MyHeader>)
}

为已存在的组件减少 css 款式：

const Button = styled.button`
    font-size: 24px;
`

const BigButton = style(Button)`
    font-size: 48px;
`

获取 props

 const Button = styled.button`
     background: ${props => props.primary ? 'palevioletred' : 'white'};
     color: ${props => props.primary ? 'white' : 'palevioletred'};
     font-size: 1em;
 `
 render(
     <div>
         <Button>Normal</Button>
         <Button primary>Primary</Button>
     </div>
 );

react-router 应用
关键点：
- Router：BrowseRouter；HashRouter
  包裹 router 的显示范畴
- Route：
  每个可通过 router 跳转的页面为一个 Route
- Switch
  包裹 Route
- Link：Link；NavLink
  跳转到 Route

mobx
三步走：
（1）创立仓库

import {makeAutoObservable} from 'mobx'
class myStore{
    count: 0;
    add(){this.count++}   
}
export {myStore}

（2）应用 Context 注入仓库

import React, {createContext, useContext} from 'react'
import {myStore} from './myStore'

const context = createContext({myStore: new myStore()
})

export const useStores = () => useContext(context)

（3）在组件中应用

const {myStore} = useStores()
// 能够应用 myStore 中的办法
myStore.count
myStore.add()

useRef

const count = useRef(0)
console.log(count.current)

非受控表单
- useRef()计划
定制图片宽高
- 若图片的 url 为 imgurl，则定制宽为 100，高为 200 的图片：
```
imgurl/w/100/h/200
```

关于前端:项目记录-goodpic-图床工具

goodpic

技术栈：

实现性能：

我的项目记录