![](https://img-blog.csdnimg.cn/20201014180756928.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端知识点
快乐的小z
前端程序媛的成长之路~
展开
-
antd按需加载优化打包后文件大小
antd按需加载前:优化antd按需加载后:优化momentjs后:只引入中文和英文两个语言包:new webpack.ContextReplacementPlugin(/moment[/\\]locale$/, /en-gb|zh-cn/),直接不实用 moment使用new Date()最终体积由2.7m -> 912kb...原创 2021-02-25 12:37:38 · 881 阅读 · 0 评论 -
react-hooks useEffect触发时机,依赖项为对象或者数组时应该如何处理?
react hooks的依赖项目可以按照数据类型分为基本数据类型和引用数据类型,当为基本数据类型时useEffect可以根据依赖项的变化而去发生改变,当为引用数据类型时,useeffect总是会被触发,因为useEffect这里进行的时浅比较eg:当依赖项为基本数据类型时const [count, setCount] = useState[0];useEffect(() => {console.log(count)}, [count]);这里当count发生变化时会在usee原创 2020-09-23 15:21:16 · 16595 阅读 · 5 评论 -
2020-09-17 实现react-beautiful-dnd+多层级树收缩展开(类比antd的tree)
实现本要求的前提是多层级的树可以拖动,并且样式有一定的要求1.antd的treeantd提供了tree组件来实现多层级的层次结构,但是扩展性相对比较有限,关键的代码如下所示{/* <Tree// showLine={true}// showIcon={true}defaultExpandAlldefaultExpandedKeys={[]}blockNode>{renderTreeNodes(data)}</Tree> */}使用r原创 2020-09-17 14:51:37 · 1413 阅读 · 0 评论 -
echarts实现数据可视化
在实际工作中,对于数据的处理常常需要对数据进行可视化的操作,本文针对日常需要总结了echarts的使用姿势echarts的常规使用根据项目的需要选择合适的可视化图标,引入echarts包设定我们需要的图形type类型:bar 柱形图 pie 饼图 ... 设定特定的类型以后对数据进行加工,得到我们需要的数据格式,如果需要对可视化图形做进一步的组合拓展可以通过r...原创 2019-12-12 11:28:41 · 2406 阅读 · 0 评论 -
前端样式管理
在前端开发过程中,随着项目的扩大,良好的样式管理占据着举足轻重的作用常用方法的预设创建一个样式文件在全局引用,对于常用的一些css样式我们首先作出处理,比如下面的这些缩写及其实际的样式。.f-ib{display:inline-block;*display:inline;*zoom:1;} .f-dn{display:none;} .f-db{display:block;} .f...原创 2019-12-11 17:59:50 · 468 阅读 · 0 评论 -
js构建层级树的几种方法
const filterList = jiraList.filter(i => !i.parentKey ||!jiraList.some(it => it.key === i.parentKey));// 如果节点存在parentKey但是parentKey对应的对象不在数组内,则需要提升当前节点为父节点const exceptParent = jiraList.f...原创 2019-11-21 12:35:44 · 2034 阅读 · 0 评论 -
redux全局数据使用出现问题结合深拷贝的思考
最近遇到一个需求使用redux可以比较简洁的实现,但是比较奇怪的是出现了下面的问题:从图中可以看出status的值实际上已经是true,然后在真正使用时渲染出来的是false。经过调试发现,原因在于对于redux中的数据进行操作时是浅拷贝的方式,实际上指针指向的仍是最初初始化的值,因此导致了取值时不正确的情况!由于数据结构只涉及一层,最终选择了es6的扩展运算符解决了该问题。深拷贝...原创 2019-08-29 20:07:46 · 952 阅读 · 0 评论