原创 react 報錯You should not use xx outside a 「Router」
不能將使用了react-router-dom的組件暴露在BrowserRouter之外 解決:將組件放在BrowserRouter內 代碼示例: import React,{Component} from 'react' im
原创 typescript 聲明文件
所有的引入的js庫,需要ts的語法提升等,都必須要有聲明文件 1、創建聲明文件 xx.d.ts 2、創建聲明語法,在xx.d.ts文件中 declare var 庫名:(selector:string)=>any; 類
原创 typescript 泛型
在定義函數、接口或類不指定具體類型 function 名稱<T>(x:T,y:T):Array<T>{ ... } 名稱<string>('str','str2');
原创 mobx Provider和inject管理mobx
將提供類似react-redux的Provider操作,使得不用在每個需要mobx的組件中引入mobx倉庫 1、安裝 cnpm install mobx-react --save 2、在index.js引入Provider
原创 react react-loadable異步組件(按需加載組件)
1、引入 cnpm install --save react-loadable 2、使用 import React from 'react'; import Loadable from 'react-loadable'
原创 react 使用mock.js模擬後臺數據
1、cnpm install mockjs -S 2、在index.js引入mock.js文件 判斷是否是生產環境 if(process.env.NODE_ENV=='development') { requir
原创 redux redux-immutable統一管理數據格式
將combineReducers內的reducer也轉換成immutable對象,統一數據格式 1、安裝 cnpm install immutable --save 2、引入 將原本的import {combineRed
原创 react 避免無意義渲染提高組件性能
當組件重新渲染時,會淺比較(如比較引用)props和state,如果發生改變就重新渲染組件,當不改變就不渲染組件 當使用Component時,只要改變了props/state,不管內容是否變化,都會渲染組件 方案一: 在組件
原创 react 支持裝飾器配置
1、安裝 cnpm -D install react-app-rewired customize-cra cnpm -D install @babel/plugin-proposal-decorators 2、與src同
原创 redux immutable管理store狀態
解決reducer不能直接'修改'state的問題 雖然immutable看起來直接修改,實際上是返回了一個新的immutable對象 1、安裝 cnpm install immutable --save 2、引入 im
原创 react 自定義json數據模擬後臺
1、在public目錄下創建json文件 如:public/api/data.json 2、在json文件中自定義數據 3、當請求url爲'api/data.json'時,會自動去到public目錄下查詢,並返回json內
原创 css 選擇器權重計算
權重: 行內樣式 1000 id選擇器 0100 class選擇器、類相關的屬性選擇器 0010 標籤、僞類 0001 * 0000 繼承無權重 null 計算: 權重會根據選擇器疊加 bod
原创 react antv實現圖片上傳預覽
1、引入 import {Upload} from 'antd' 全局引入樣式:import 'antd/dist/antd.css' 2、使用 <Upload name="上傳名稱,和後臺約定
原创 利用socket.io實現用戶實時聊天
聊天存入數據庫需要的參數標識: 兩個用戶的標識 聊天消息內容 發送消息的時間 當前對話消息的標識 1、在前臺的異步請求中,使用socket來發送消息 向後臺發送時,應該將兩個用戶的標識傳遞,且能看出誰向誰發,還要攜帶
原创 react Ant Motion設置動畫
1、安裝 cnpm install rc-queue-anim --save 2、引入 import QueueAnim from 'rc-queue-anim'; 3、使用: <QueueAnim delay={