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