1.dva new app
完善配置:a.安装antd 和 babel-plugin-import
2.使用:
a.Link 引自 dva/router中
b.dispatch中的type值应该写全:index/add
c.注册model时,应判断是否已绑过,避免重复绑定而报错(app._model方法取得所有已绑定的model)
d.yield 的delay需自己写
f.1.yield call(requst(),params): requst必须是个function,通常返回一个fetch,params是传递给request中的参数,
格式为{method:'post/get',body:'相当于ajax的data',header:''}
2.routerReudx.push({
pathname: '/docs/list',
query: { modal: true },
state: { fromDashboard: true, ... }
})在目标页使用location属性获取值
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方法的参数三也是文件名,也可通过此修改
h.reat-router异步加载时注意事项：
1、require(‘components/Index').default中require方法的参数不能使用变量，只能使用字符串！
2、如果你的组件是使用es5的module.exports导出的话，那么只需要require(‘components/Index')即可。而如果你的组件是使用es6的export default导出的话，那么需要加上default！例如：require(‘components/Index').default
3、如果在路由页面使用了按需加载（require.ensure）加载路由级组件的方式，那么在其他地方（包括本页面）就不要再import了，否则不会打包生成chunk文件。简而言之，需要按需加载的路由级组件必须在路由页面进行加载。
3. ant-design使用:
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开发的插件
4123
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
