原创 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={