Alison_Z的博客

原创 antd按需加载优化打包后文件大小

antd按需加载前：优化antd按需加载后：优化momentjs后：只引入中文和英文两个语言包：new webpack.ContextReplacementPlugin(/moment[/\\]locale$/, /en-gb|zh-cn/),直接不实用 moment使用new Date()最终体积由2.7m -> 912kb...

原创 react-hooks useEffect触发时机，依赖项为对象或者数组时应该如何处理？

react hooks的依赖项目可以按照数据类型分为基本数据类型和引用数据类型，当为基本数据类型时useEffect可以根据依赖项的变化而去发生改变，当为引用数据类型时，useeffect总是会被触发，因为useEffect这里进行的时浅比较eg:当依赖项为基本数据类型时const [count, setCount] = useState[0];useEffect(() => {console.log(count)}, [count]);这里当count发生变化时会在usee

原创 2020-09-17 实现react-beautiful-dnd+多层级树收缩展开（类比antd的tree）

实现本要求的前提是多层级的树可以拖动，并且样式有一定的要求1.antd的treeantd提供了tree组件来实现多层级的层次结构，但是扩展性相对比较有限，关键的代码如下所示{/* <Tree// showLine={true}// showIcon={true}defaultExpandAlldefaultExpandedKeys={[]}blockNode>{renderTreeNodes(data)}</Tree> */}使用r

原创 echarts实现数据可视化

在实际工作中，对于数据的处理常常需要对数据进行可视化的操作，本文针对日常需要总结了echarts的使用姿势echarts的常规使用根据项目的需要选择合适的可视化图标，引入echarts包设定我们需要的图形type类型：bar 柱形图 pie 饼图 ... 设定特定的类型以后对数据进行加工，得到我们需要的数据格式，如果需要对可视化图形做进一步的组合拓展可以通过r...

原创 前端样式管理

在前端开发过程中，随着项目的扩大，良好的样式管理占据着举足轻重的作用常用方法的预设创建一个样式文件在全局引用，对于常用的一些css样式我们首先作出处理，比如下面的这些缩写及其实际的样式。.f-ib{display:inline-block;*display:inline;*zoom:1;} .f-dn{display:none;} .f-db{display:block;} .f...

原创 js构建层级树的几种方法

const filterList = jiraList.filter(i => !i.parentKey ||!jiraList.some(it => it.key === i.parentKey));// 如果节点存在parentKey但是parentKey对应的对象不在数组内，则需要提升当前节点为父节点const exceptParent = jiraList.f...

原创 redux全局数据使用出现问题结合深拷贝的思考

最近遇到一个需求使用redux可以比较简洁的实现，但是比较奇怪的是出现了下面的问题：从图中可以看出status的值实际上已经是true,然后在真正使用时渲染出来的是false。经过调试发现，原因在于对于redux中的数据进行操作时是浅拷贝的方式，实际上指针指向的仍是最初初始化的值，因此导致了取值时不正确的情况！由于数据结构只涉及一层，最终选择了es6的扩展运算符解决了该问题。深拷贝...

原创 表格拖拽排序之react-dnd---结合antd Table

实现效果首先引入react-dnd需要的npm包import { DndProvider, DragSource, DropTarget } from 'react-dnd';import HTML5Backend from 'react-dnd-html5-backend';import update from 'immutability-helper';其次设置Table...

原创 antd使用TimePicker时报错

看报错的原因：最后一句，你可能有react的多个版本存在。然后点击下面的details可以看到文章最后建议我们可以npm ls react来看一下，于是有了我的第二张图对于第二张图我们猜测可能时react的版本有问题，于是先对npm进行更新得以解决。...

转载 React创建组件的三种方式及其区别（有状态组件和无状态组件）

React推出后，出于不同的原因先后出现三种定义react组件的方式，殊途同归；具体的三种方式：函数式定义的无状态组件 es5原生方式React.createClass定义的组件 es6形式的extends React.Component定义的组件虽然有三种方式可以定义react的组件，那么这三种定义组件方式有什么不同呢？或者说为什么会出现对应的定义方式呢？下面就简单介绍一下。无状态...

原创 react页面传参跳转Link&hashHistory

第一种方式使用link：&lt;Link to={{ pathname: 'purchaseRecord', type: 'inputs', id: '1'}} &gt;&lt;a onClick={()=&gt;this.handleRecord()}&gt;拼团记录&lt;/a&gt;&lt;/Link&gt;获取传过来的值：this.props.location.type/id第...

原创 react中 配置一个简单的web服务器使用npm start启动

第一种方式：安装依赖react-scripts第二种方式：使用webpack-dev-server来配置启动WEB服务器。 来自链接webpack-dev-server

转载 react、redux、react-redux之间的关系

本文介绍了react、redux、react-redux之间的关系，分享给大家，也给自己留个笔记，具体如下：React一些小型项目，只使用 React 完全够用了，数据管理使用props、state即可，那什么时候需要引入Redux呢？ 当渲染一个组件的数据是通过props从父组件中获取时，通常情况下是 A --&gt; B，但随着业务复杂度的增加，有可能是这样的：A --&gt; B --&gt...

原创 实现有多个图片的遍历显示react

如图要想实现这个效果，首先这些图片是存储在一个数组中的，我们要取出图片然后遍历显示出来，可以如下显示： render: (text) =&gt; { if (text &amp;&amp; text.length) { const imgs = text.map((item, index) =&gt; &lt;div ...

原创 js中map和forEach的区别

最近在写项目中发现如果想要对一个数组进行操作经常会用到遍历的方式，在用到遍历的方式的时候经常用到的有map和forEach方法，下面结合我查阅的资料和自己项目中的体会谈谈二者的区别。首先map方法：map对一个数组对象进行操作时，一般是生成一个新的数组，可以在map中限制生成新数组的条件，有返回值forEach方法：forEach方法一般是对原有的数组进行操作，没有返回值示例下方提供了一个数组，如...

原创 js函数之some和filter

最近在实现一个功能时一开始想的比较简单，后来因为需要更加完善的功能一时无从下手最终是带我的学长实现的，看了他写的代码学到不少，下面记录一下自己的心得体会。如图要实现的是左边模糊查询以后右边显示出查询的结果，然后点击相应的结果以后下方显示出对应的记录。首先对于上面的查询显示就是一个简单的模糊查询主要依靠后台的结果，然后将查询的结果放在select的option里面即可对于下方的展示功能（注意还有右方...

原创 关于react的resetFields使用

最近在写项目中为了清空modal中的值，所以用到了resetFields方法，该方法主要是对form中的值进行重置，没有默认值的情况下会被清空但是需要注意的是若是有需要部分的值一直存在的话，要注意在清空之前进行一个保存，在清空之后在用setFieldsValue进行设置如图注意resetFields的位置...

原创 react span设置行内样式自动换行

设置样式之前要先设置display和width，因为span是行内元素本身是没有宽度的宽度默认是auto，所以如果不事先设置这两个属性直接设置whiteSpace是不起作用的。...

原创 antd datePicker控件获取时间

获取默认时间的二种方式第一种首先是获取当前时间可以是这样的注意到这里设置的defaultValue就是显示的默认时间如果想要获取一段时间比如说7天以前的我们可以这样const startTime = moment().add(-7,'days').format('YYYY-MM-DD');然后将moment的第一个参数改成startTime即可第二种这种情况可能是你把dataPicker放到了fo...

原创 react组件封装自己的理解

为什么使用组件一开始用react做项目的时候只知道react是组件化的，但是没有深入去理解为什么要封装组件，怎样去封装组件上周在实际项目中自己尝试去封装了一个组件，最大的感受就是代码变得简洁了很多，本来要写三次类似代码现在只写一次就搞定了，不得不感概组件封装最实在的意义。另一方面是可以提高我们编程的效率，代码复用性高了自然效率高了。最后我觉得是提高思考的能力吧，换种更简单的方式去实...

原创 react 两个下拉框嵌套查询

需求：如下图所示，在年级复选框的前提下区分成全部，上架，下架三个选项首先我们在之前下拉框后增加一个下拉框，如果值比较少，可以手动写好在onselect中实现对应的事件方法取到我们选择的值，接下来我们需要在state中存放一个变量用来保存onselect变化时选择的value值，以便在我们需要的地方去使用这样就可以实现多个下拉框筛选功能了...

原创 react项目学习心得--后台管理模块前端实践总结（antd）

最近在用react做一个项目中的一个模块，总结react的几个重要的点1.state用于保存变量，setstate用于更新变量的值，但是要注意变量的冗余度，如果是一组数据同时变化需要修改的话可以在state中放置一个类似于modal的变量集2.使用最频繁的几个生命周期componentDidMount中可以渲染你想要一打开页面就看到的图表之类的东西componentWillMount和Compon...

原创 react中的state中的modal的setstate实现方式

原创 react问题二

该问题的原因是config.js文件中最后没有添加export default config；没有导出config文件导致出错。

原创 react遇到问题解决一

此处问题：return&lt;div&gt;...&lt;/div&gt;//写法错误，这样的话相当于return后面没有返回的东西有以下两种写法：一：return &lt;div&gt;..&lt;/div&gt;//不可换行二：return (&lt;div&gt;...&lt;/div&gt;//可以换行)...

原创 react初识总结

props一般是组件间传值state用于更新一个视图中的值等值的更新要通过触发setstate来传递到update生命周期，因此要先定义state的初识状态，在setstate中进行修改map中若是写了{}必须要有return才行在render中若是值的话写在{ }中（js）...

原创 react学习一（初步认识react）

react优势1.组件化，而不是写一大堆html模版js逻辑和html标签紧密连接并且及易理解2.单项数据流数据一旦更新，就直接渲染整个app以往的方式：管理UI的状态并不简单修改dom树 修改数据 接受用户的输入 异步API的数据请求与传统的服务器端渲染相似传统方式1.浏览器请求页面 2.服务器请求数据库 3.将数据传给模版 4.模版渲染页面react的渲染方式1.用户输入 2.从API获取数据...

转载 js call apply bind比较

在Javascript中，Function是一种对象。Function对象中的this指向决定于函数被调用的方式。使用apply，call 与 bind 均可以改变函数对象中this的指向，在说区别之前还是先总结一下三者的相似之处：1、都是用来改变函数的this对象的指向的。2、第一个参数都是this要指向的对象。3、都可以利用后续参数传参。call方法: 语法：call([thisOb...

原创 继承属性和方法 BOM

将元素固定在页面右下角

转载 Mac安装mysql初始密码忘记 重新设置密码

Mac安装MySQL后，设置初始密码引子： 在Mac上安装MySQL之后，通过MySQLWorkBench登录本地数据连接，发现没有密码，而在安装MySQL过程中，是没有设置过密码的。其实，刚刚安装完，是有一个界面，分配了一个初始化的密码，可能大家都像我一样，直接点击就跳过去了，没有过保存，所以才需要对刚刚安装好的MySQL重新设置新的密码。 下面贴出一个MySQL安装之后弹出密码的截图： （PS...

原创 css3新特性 过渡 动画 2d 3d转换

过渡过渡三要素：1.必须要有属性发生变化 如：width background等2.必须要告诉系统哪个属性需要执行过渡效果：transition-property:width,background;3.必须告诉系统过渡效果的持续时长：transition-duration:5s,5s;transition-delay//告诉系统延迟多少秒才执行过渡效果transition-timing-funct...

转载 js中的apply()和call()

.apply()用法和call()的区别Js apply方法详解我在一开始看到javascript的函数apply和call时,非常的模糊,看也看不懂,最近在网上看到一些文章对apply方法和call的一些示例,总算是看的有点眉目了,在这里我做如下笔记,希望和大家分享.. 如有什么不对的或者说法不明确的地方希望读者多多提一些意见,以便共同提高..主要我是要解决一下几个问题:1.apply和call...

转载 defer和async

转载 js数组去重的6种方法

JS实现数组去重方法总结(六种方法)方法一：双层循环，外层循环元素，内层循环时比较值如果有相同的值则跳过，不相同则push进数组?123456789101112131415161718Array.prototype.distinct = function(){ var arr = this,  result = [],  i,  j,  len = arr.length; for(i = 0; i...

转载 双飞翼布局和圣杯布局

https://www.zhihu.com/question/21504052【圣杯布局】在这里，实现了左(200px) 右(220px) 宽度固定，中间自适应，container部分高度保持一致。DEMO稍微说明一下：html代码中  middle部分首先要放在container的最前部分。然后是left,right1.将三者都 float:left , 再加上一个position:relati...

转载 前端基本知识：JS的异步模式：1、回调函数；2、事件监听；3、观察者模式；4、promise对象

前端基本知识（四）：JS的异步模式：1、回调函数；2、事件监听；3、观察者模式；4、promise对象 JavaScript语言将任务的执行模式可以分成两种：同步（Synchronous）和异步（Asychronous）。“同步模式”就是一个任务完成之后，后边跟着一个任务接着执行；程序的执行顺序和排列顺序是一直的；”异步模式”则完全不同，每一个任务都有一个或者多个回调函数（callback），前一...

原创 前端面试问题（四）html css

说说你对HTML语义化的理解?(1)什么是 HTML 语义化？&lt;基本上都是围绕着几个主要的标签，像标题（ H1~H6 ）、列表（ li ）、强调（ strong em ）等等 &gt;根据内容的结构化（内容语义化），选择合适的标签（代码语义化）便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。(2)为什么要语义化？为了在没有CSS的情况下，页面也能呈现出很好地内容结构、代...

原创 浏览器缓存 描述一下 cookies，sessionStorage 和 localStorage 的区别?

sessionStorage 和 localStorage 是 HTML5 Web Storage API 提供的，可以方便的在 web 请求之间保存数据。有了本地数据，就可以避免数据在浏览器和服务器间不必要地来回传递。sessionStorage、 localStorage 、 cookie 都是在浏览器端存储的数据，其中 sessionStorage 的概念很特别，引入了一个“浏览器窗口”的概...

转载 CORS解决跨域请求--html5

CORS是一个W3C标准，全称是"跨域资源共享"（Cross-origin resource sharing）。它允许浏览器向跨源服务器，发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制。本文详细介绍CORS的内部机制。一、简介CORS需要浏览器和服务器同时支持。目前，所有浏览器都支持该功能，IE浏览器不能低于IE10。整个CORS通信过程，都是浏览器自动完成，不需要用户...

转载 tcp的三次握手和四次挥手

Http协议三次握手过程  2013-05-23 17:00:28|  分类： http头|字号 订阅TCP(Transmission Control Protocol)　传输控制协议TCP是主机对主机层的传输控制协议，提供可靠的连接服务，采用三次握手确认建立一个连接:位码即tcp标志位,有6种标示:SYN(synchronous建立联机) ACK(acknowledgement 确认) PSH(...