在react项目开发中,经常需要引用一些实用的第三方框架。在使用一些比较庞大的第三方框架时,框架内的各种资源文件数量巨大,这时,如果我们在每次使用框架时,都将框架内所有资源都全部加载的话,这将使得页面的性能大大降低。这时,我们就需要对这些庞大的第三方框架做按需加载了。
首先介绍下对单个框架做按需加载的方法
其实在使用create-react-app脚手架的情况下,对单个框架做按需加载的方法,网上的相关文章已经很多了,我这里只简单的介绍下。常用的方法就是通过babel-plugin-import来实现按需加载,并通过react-app-rewired来重写项目配置文件,将babel-plugin-import写入配置。
1、安装
cnpm install babel-plugin-import --dev
cnpm install react-app-rewired --dev
2、修改package.json
"scripts": {
- "start": "react-scripts start",
+ "start": "react-app-rewired start",
- "build": "react-scripts build",
+ "build": "react-app-rewired build",
- "test": "react-scripts test",
+ "test": "react-app-rewired test",
}
3、在项目的根目录下创建一个 config-overrides.js 用于修改默认配置
const {injectBabelPlugin} = require('react-app-rewired');
const rewireLess = require('react-app-rewire-less');
const path = require('path')
module.exports = function override(config, env) {
config = injectBabelPlugin(
['import',
{
libraryName: 'antd',
libraryDirectory: 'es',
style: true
}
],
config
);
config = rewireLess.withLoaderOptions({
modifyVars: {"@primary-color": "#4197FC"},
javascriptEnabled: true,
})(config, env);
return config;
};
这样就完成了对antd的按需加载
那么对多个框架做按需加载应该怎么做呢?
对多个框架做按需加载的方法
这里拿antd和antd-mobile两个框架来举例子
首先还是要按照上面的步骤安装babel-plugin-import和react-app-rewired,并修改默认配置,区别只是在最后一步上。在调用babel-plugin-import的injectBabelPlugin方法时,需要调用两次,并注明相对应的框架名。具体代码如下:
const {injectBabelPlugin} = require('react-app-rewired');
const rewireLess = require('react-app-rewire-less');
const path = require('path')
module.exports = function override(config, env) {
config = injectBabelPlugin(
['import',
{
libraryName: 'antd',
libraryDirectory: 'es',
style: true
}, 'ant'
],
config
);
config = injectBabelPlugin(
['import',
{
libraryName: "antd-mobile",
libraryDirectory: 'lib',
style: true
}, 'ant-mobile'
],
config
);
config = rewireLess.withLoaderOptions({
modifyVars: {"@primary-color": "#4197FC"},
javascriptEnabled: true,
})(config, env);
return config;
};
来自:https://segmentfault.com/a/1190000018164498
最近使用antd来做react项目的UI。从antd官网上,在使用create-react-app脚手架搭建项目时步骤如下:加模块 react-app-rewired, babel-plugin-import, react-app-rewire-less,根目录添加config-overrides.js,修改npm script即可, 一切正常
最近在使用List组件的时候,发现组件没有重新渲染,导致状态发送错误。这里我们使用了List组件,这是一个很常用的组件。但是当我们点击按钮的时候,发现6,7,8三个组件 都没有重新渲染。
Ant组件的安装和使用在官网都有教程,下面记录一下自己的使用。Ant组件是好用,一引入直接就有了功能组件。但问题是UI给我们的和这些组件往往不一样,比如样式颜色,多个view,button什么的
使用antd中的select下拉框,遇到个小问题,后台管理系统中,使用下拉框,一般不会是简单的就直接使用select中的value值,而是会使用id或者value中文对应的keyword,并且这个在option中的value值也是可能重复的
在开发中台过程中 我们的原型中有很多表单,antd有表单组件,但是粒度比较细,就单纯组件而言,无可厚非,但是在开发过程中,可能会造成代码不够聚合,有些表单公共逻辑无法提取,copy paste比较多,所以可以加以封装
modal框的dom与<div id=root>同级别,因此不能以user-manage为父元素定义样式,以.modal定义样式会污染其他模块的模态框,(下拉框选项的级别也与root同级),即:
我们从官网摘下来一段Form代码,可以很清晰的看出一个简单的表单,主要是为了统一收集和校验组件的值。那么它是如何做到统一收集和校验呢?原理很简单,只需要通过监听表单组件的onChange事件,获取表单项的 value
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!