プロジェクト記録:goodpic-ツール

3199 ワード
先端 javascript react.js serverless leancloud
goodpic
プレビューリンク:https://oliver-ysq.github.io/...コードアドレス:https://github.com/Oliver-Ysq...
技術スタック:
  • React:base技術フレーム
  • React-Router:ルーティング管理
  • Mobx 6:グローバルデータ管理
  • style-component:css in jsソリューション
  • ANtd:コンポーネントライブラリ
  • leancloud:アリserverless解決策
    • 実装機能:
  • は、ユーザの登録とログインをサポートする
    • .
  • は、png/jpg/gif/svgフォーマットの、1 MB以内のサイズのピクチャファイルのアップロードをサポートします.
  • は、ライブラリの管理(参照と削除を含む)をサポートする
    • .
  • ライブラリは、動的(ステップ分)スライドローディングをサポートしています.
  • は、モバイル端末として@mediaを使用する.
    • プロジェクト記録
  • 怠惰なロードは必要に応じてコンポーネントをロードし、一度に全部のコンポーネントがもたらすカードトンをロードすることを防止する.
    import {Suspense, lazy} from "react";
...
const Home = lazy(()=>import("./pages/component/Home"))
const About = lazy(()=>import("./pages/component/About"))

jsx:
}>   {/*      */}
  • style-components
  • 基本使用量は
    • です.
    import styled from "styled-components"
const MyHeader = styled.header` //           
      
    color: red;
`

export default function component(){
    return(
        welcome
    )
}
    • 为已存在的组件增加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(
     
    
         
         
     
    
 );
  • react-router使用のポイント:
  • Router:BrowseRouter;HashRouter小包routerの表示範囲
  • Route:各routerを通じてジャンプできるページはRoute
    • です.
  • Switch小包Route
  • Link:Link;NavLinkはRoute
    • にジャンプします.
  • mobx 3ステップ:(1)倉庫を作成する
    import {makeAutoObservable} from 'mobx'
class myStore{
    count: 0;
    add(){
        this.count++
    }   
}
export {myStore}
    (2)Contectを使用して倉庫に注入する
    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がimgrlであれば、幅は100で、高さは200のピクチャ:
    imgurl/w/100/h/200
    • echart設定Y軸ラベルはヒストグラム上で垂直に中央揃えで無効になります.