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.countmyStore.add()

  5. useRef

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

  6. 非受控表单

    • useRef()计划

  7. 定制图片宽高

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

      imgurl/w/100/h/200