react,antdesign使用

時間 2019-11-24

原文原文鏈接

1.dva new app
完善配置:a.安裝antd 和 babel-plugin-importcss

2.使用:
a.Link 引自 dva/router中html

b.dispatch中的type值應該寫全:index/addnode

c.註冊model時,應判斷是否已綁過,避免重複綁定而報錯(app._model方法取得全部已綁定的model)react

d.yield 的delay需本身寫webpack

f.1.yield call(requst(),params): requst必須是個function,一般返回一個fetch,params是傳遞給request中的參數,
格式爲{method:'post/get',body:'至關於ajax的data',header:''}ios

2.routerReudx.push({
pathname: '/docs/list',
query: { modal: true },
state: { fromDashboard: true, ... }
})在目標頁使用location屬性獲取值git

   g. .roldhogrc文件的配置:{
       經常使用的有:
       publicPath:'string' //生成環境的路徑前綴
       outputPath:'string' //靜態資源輸出的位置 , 圖片默認複製到static文件中,
   }
   h:生成文件的版本控制(hash):
       a.直接修改node_models/roadhog/lib/config/webpack.config.prod.js文件:
               filename:[name].[hash:8].js //index入口文件
               chunkFilename:'[name].[chunkhash:位數].js' //各個頁面的js文件
               90行: '[name].[hash:8].css') ('common', 'common.[contenthash:8].js')) //common文件
       b.在router.js中,ensure方法的參數三也是文件名,也可經過此修改es6

h.reat-router異步加載時注意事項：
一、require(‘components/Index').default中require方法的參數不能使用變量，只能使用字符串！
二、若是你的組件是使用es5的module.exports導出的話，那麼只須要require(‘components/Index')便可。而若是你的組件是使用es6的export default導出的話，那麼須要加上default！例如：require(‘components/Index').default
三、若是在路由頁面使用了按需加載（require.ensure）加載路由級組件的方式，那麼在其餘地方（包括本頁面）就不要再import了，不然不會打包生成chunk文件。簡而言之，須要按需加載的路由級組件必須在路由頁面進行加載。github

3. ant-design使用:web

a.表單驗證:validator中的callback必須執行,callback的參數便是errors中的錯誤信息,即便驗證成功,依然會有error對象

b.異步驗證確認密碼時:使用a,(error中始終有一個錯誤對象,????);所以將確認密碼的驗證pattern動態設置爲密碼的值;

c.datePicker:使用時,日期的大小必定是正常的,如果隨意的數字,會 invalide value

d.Selete組件使用:當須要多選時,必須顯示指定數據的格式:type:'array'???
默認值怎麼綁定(在formItem中)(title屬性)

e:無狀態函數中如何組織默認行爲??如何拿到e對象

f:form表單提交和按鈕提交的區別(在無狀態函數中):表單提交會有刷新行爲,如何避免?
解決:antd中form組件的提交行爲已被阻止:button爲submit,並添加onClick事件

g:react中post文件下載時,須要建立form表單,經過表單下載

h:react中刷新組件能夠清除已存在的默認輸入值,狀態,經過key設置不一樣的值進行刷新

j:無狀態函數能夠提升性能,同時也不存在函數的各個狀態了,所以,需根據頁面行爲肯定使用.(例如:經常使用的table,頁面加載時就須要請求數據一次數據,最好使用有狀態函數,或者利用flag標識也行(標識最方便))

i:select組件:當多選時,值的類型爲數組,數組中的元素的類型爲string,(所以當有數字時,必需要強制轉換類型);
當遍歷option元素時,一般須要設置key值,此時key值也做爲value屬性,並在onchange函數中被返回,固然,key和value也可同時存在

k:chekbox組件:設置默認值使用defaultChecked:boolean,當在被formItem修飾後,設置默認值時,需同時在getFieldDecorator中設置initialValue的值:boolean

l:Link組件在Button組件中在Firefox中點擊事件無效,需將Link包裹Button

m:頁面加載時,多個請求同時發送,如何判斷最後一個請求結束並關閉loading呢??????(loading標識放在全局中,判斷當前請求的個數)

n:頁面按需加載實現後,從新切換至某個頁面,頁面中的默認請求不會發送(即頁面不是初始狀態),??

(無狀態函數中,能夠在頁面跳轉時重置全局的firstLoadingflag標識)

o.upload組件:限制文件類型可經過accept:string(eg. '.jpg,.png,image/*')參數,或者beforeupload方法中判斷

4. es6寫法:
1.函數的綁定必需要bind(this),這樣函數中的this才指向組件;無狀態函數則沒有this;

2.react的合成事件:採用駝峯寫法;是基於Virtual DOM 實現的一個sytheticEvent層,符合W3C標準,不存在ie的兼容性,可使用stopPropagation()和preventDefault()中斷冒泡行爲.

4.報錯:
1.<!Doctype html> :編譯錯誤,親歷入口文件名稱有誤;代碼有誤,編譯時就會出錯.

   ????
   1.子組件如何獲取dispatch,和state:經過普通的props傳遞下去
   2.一個頁面能否綁定多個model,如何綁?

3.如何綁定函數,e事件才能夠拿到

5.異步請求:
1.axios:axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
jq,等插件的普通post請求,默認爲application/x-www-form-urlencoded,以formdata對象傳遞,在後臺中,tomcat中會有個默認的解析過程,

可是,默認狀況下,axios將js對象序列化成JSON,(後臺沒有默認的解析過程,因此後獲取不到)若想轉換爲application/x-www-form-urlencoded format 的格式,可使用qs.stringify,或者querystring.stringify進行轉化.

6.hash:roadhog:hash:true,能夠增長hash值,可是最後一次開發時發現:當添加hash值時,會報錯:MIME type ('text/css') is not executable, and strict MIME type checking is enabled.
未找到緣由;
解決方式是將hash值的前綴'.'去掉可暫時解決問題

===============================================================================================

1.antd-mobile(dva-cli):

   1. 自定義svg沒法顯示:
   -----------------------------------------------------------------------------------
   roadhog配置無 svgSpriteLoaderDirs(只處理antd-mobile) svgSpriteLoaderDirs
   --------------------------------------------------------------------------------------
   Icon(內置) 不顯示正常正常
   ----------------------------------------------------------------------------------------
   Icon(自定義) 不顯示不顯示不顯示
--------------------------------------------------------------------------------------
img(src) 正常正常不顯示
   ----------------------------------------------------------------------------------------
暫時認爲:在dva-cli中爲了更好的使用svg,設置svgSpriteLoaderDirs(只處理antd-mobile);自定義svg所有使用img中;
   2.頁面js稍大,
   3.官方彷佛更推薦使用 create-react(-native)-app進行建立項目

create-react-app :
-----------------------------------------------------------------------------------
無無 config(loader:只處理antd-mobile) config()
---------------------------------------------------------------------------------------
Icon(內置) 不顯示不顯示不顯示
----------------------------------------------------------------------------------------
Icon(自定義) 不顯示不顯示不顯示
--------------------------------------------------------------------------------------
img(src) 正常正常正常
----------------------------------------------------------------------------------
create-react-app中:svg只能本身下載,使用本地的了.

2.antd-mobile(create-react-app):

1.按照官網步驟進行配置:
extensions: ['.web.js', '.js', '.json', '.jsx'],
...
rules: [
{
exclude: [
...
/\.less$/,
...
]
},
...
// Process JS with Babel.
{
test: /\.(js|jsx)$/,
...
options: {
plugins: [
['import', { libraryName: 'antd-mobile', style: true }],
],
cacheDirectory: true,
}
},
...
// It is generally necessary to use the Icon component, need to configure svg-sprite-loader
{
test: /\.(svg)$/i,
loader: 'svg-sprite-loader',
include: [
require.resolve('antd-mobile').replace(/warn\.js$/, ''), // 1. svg files of antd-mobile
// path.resolve(__dirname, 'src/my-project-svg-foler'), // folder of svg files in your project
]
},
{
test: /\.less$/,
use: [
require.resolve('style-loader'),
require.resolve('css-loader'),
{
loader: require.resolve('postcss-loader'),
options: {
ident: 'postcss', // https://webpack.js.org/guides/migrating/#complex-options
plugins: () => [
autoprefixer({
browsers: ['last 2 versions', 'Firefox ESR', '> 1%', 'ie >= 8', 'iOS >= 8', 'Android >= 4'],
}),
pxtorem({ rootValue: 100, propWhiteList: [] })
],
},
},
{
loader: require.resolve('less-loader'),
options: {
modifyVars: { "@primary-color": "#1DA57A" },
},
},
],
}
]

注:若組件的樣式沒有引入或引入錯誤,嘗試將:
['import', { libraryName: 'antd-mobile', style: true }],修改成
['import', { libraryName: 'antd-mobile', style: 'css' }],

2.fastclick並不是必定須要,只是在官網中有此類的issue出現(在ios中modal點擊蒙層沒法關閉,與此有關):
//The script must be loaded prior to instantiating FastClick on any element of the page.必須在任何元素實例化以前加載
var attachFastClick = require('fastclick');
attachFastClick(document.body);

3.create-react-app中沒法向dva-cli同樣管理獲取因此的數據,可是能夠在rootRouter(根頁面)中把回調函數傳遞給子路由,而且回調函數需定義在根頁面的狀態中或屬性中,方可獲取正確的this
4.對於組合組件中,若報錯:Import in body of module; reorder to top import/first;則是組件中的子組件不能重複引用,需直接使用<List.Item>12</List.Item>

5.Icon 已不推薦使用,也沒必要安裝svg-sprite-loader,全部 svg 最大程度壓縮以後所有內聯。(https://github.com/ant-design/ant-design-mobile/pull/1740)
6.頁面動畫:推薦使用ant-motion中的動畫;bug:在安裝rc-queue-anim插件時,會把已安裝的插件覆蓋掉,致使項目沒法運行,所以只能將其首先安裝,

*****組件重複引用問題(react):當子頁面(相對於rootRouter)使用相同的組件(包括自定義的組件)時,組件的代碼將重複引入,此時若容器頁面(rootRouter)也使用了相同的組件,項目將只在rootRouter中引用一次(使用dva-cli和create-react-app).

7.組件按照dpr=2 設置的尺寸,在dpr=2中的設備中沒有問題,可是按照flexible.js的設置,在dpr=3中的設備中,scale = 0.3333,高度將被縮小,所以,解決方法是:dpr>=2時統一按照2處理,這樣即便是設計稿中的高度尺寸也可使用px了.

8.create-react-app中：
a.message方法使用受限：componentDidMount中沒法使用，request方法開始時沒法使用，通常的方法中也沒法使用

9. Row,Col組件的使用：普通模式下row,col使用相對定位，百分比佈局，當type=flex時，採用flex佈局（本身寫的flex佈局在ie9中不起做用，而使用antd組件卻生效），注意：當採用flex佈局時，Row的高度在ie9中默認爲0,。

react動畫:
1.antd-motion:
a.scrollAnim:相似微信場景,當設置scroll.init()時,每一個'頁面'必須設置overflow:hidden,才能使<QueueAnim>標籤正常使用,
否則page 的位置會有錯位,並影響鼠標事件.
b.bannerAnim:followParallax參數中的id名只能對頁面中的第一個起做用,所以id名不能重名
BannerAnim=>Element=>Element.BgElement(背景容器,需設置寬高和絕對定位),子元素(TweenOne,等)

2.velocity-react
3.animation

react使用流程:
1.create-react-app方法生成項目

2.狀態管理非必須(狀態管理中沒法進行復雜的運算),頁面級組件最好不要寫成無狀態函數,

3.設置全局狀態,經過全局方法進行控制,全局方法添加在root頁中的children屬性中

4.後臺系統(內容簡單,只有list列表):添加tab頁(相似商戶端):使用tabs組件,將每一個頁面children保存在全局狀態中,並做爲tabpane的內容,可是頁面執行刷新操做將把因此狀態清除,所以頁面的增刪該查將不能簡單的執行刷新,需手動修改狀態中的的數據;
爲了能響應list和tab的點擊事件,需給每一個頁面firstLoading標識並存放在全局狀態中,在每一個頁面中的componentDidMount()和componentDidUpdate()方法中判斷firstLoading的值並更新列表內容(若內容較多,需重置多個內容區域,就須要寫個單獨方法reset內容,並在全局中增長reset狀態參數);
頁面中的頁面跳轉:處理tab和children屬性的addtab方法做爲公共方法傳遞給每一個子頁面,子頁面中的路由跳轉後執行addtab方法

列表頁的操做:1.刪除:須要從新加載此頁數據,所以須要保留頁面中的狀態,因此不能刷新,
2.編輯:沒必要要從新加載數據,可修改並從新賦值給table(防止數據修改有誤,或後臺數據變更,首選從新加載數據)

問題:1.一個兩位小數的數值在頁面中默認顯示成不少位小數(精度的問題?)
2.頁面回退至上個頁面:頁面的數據會保留(用戶主動輸入的值),可是經過js賦值的input的值可能不會保存(chrome不一樣版本結果不一致)

3.reac中富文本編輯器的使用:
a.ueditor.js:含有大量的插件,插件的引用是使用js拼接路徑,但在react的開發環境中沒法引用到插件js,所以只能直接在html中引入,爲了在dev和build中表現一致,需將插件js放置在public文件夾中,並使用相對路徑引入.

b.draft.js:是Facebook開發的插件