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

goodpic

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

技术栈：

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

实现性能：

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

我的项目记录

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

   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>

2. 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>
    );

3. react-router 应用
   关键点：

   • Router：BrowseRouter；HashRouter
     包裹 router 的显示范畴
   • Route：
     每个可通过 router 跳转的页面为一个 Route
   • Switch
     包裹 Route
   • Link：Link；NavLink
     跳转到 Route

4. 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()

5. useRef

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

6. 非受控表单

   • useRef()计划

7. 定制图片宽高

   • 若图片的 url 为 imgurl，则定制宽为 100，高为 200 的图片：

     imgurl/w/100/h/200