<?xml version="1.0" encoding="utf-8" ?><rss version="2.0"><channel><title><![CDATA[Alison_Z的博客]]></title><description><![CDATA[]]></description><link>https://blog.youkuaiyun.com/Alison_Z</link><language>zh-cn</language><generator>https://blog.youkuaiyun.com/</generator><copyright><![CDATA[Copyright &copy; Alison_Z]]></copyright><item><title><![CDATA[antd按需加载优化打包后文件大小]]></title><link>https://blog.youkuaiyun.com/Alison_Z/article/details/114063262</link><guid>https://blog.youkuaiyun.com/Alison_Z/article/details/114063262</guid><author>Alison_Z</author><pubDate>Thu, 25 Feb 2021 12:37:38 +0800</pubDate><description><![CDATA[antd按需加载前：







优化antd按需加载后：





优化momentjs后：

只引入中文和英文两个语言包：


new webpack.ContextReplacementPlugin(/moment[/\\]locale$/, /en-gb|zh-cn/),





直接不实用 moment使用new Date()





最终体积由2.7m -&gt; 912kb
...]]></description><category></category></item><item><title><![CDATA[react-hooks useEffect触发时机，依赖项为对象或者数组时应该如何处理？]]></title><link>https://blog.youkuaiyun.com/Alison_Z/article/details/108752306</link><guid>https://blog.youkuaiyun.com/Alison_Z/article/details/108752306</guid><author>Alison_Z</author><pubDate>Wed, 23 Sep 2020 15:21:16 +0800</pubDate><description><![CDATA[react hooks的依赖项目可以按照数据类型分为基本数据类型和引用数据类型，当为基本数据类型时useEffect可以根据依赖项的变化而去发生改变，当为引用数据类型时，useeffect总是会被触发，因为useEffect这里进行的时浅比较

eg:当依赖项为基本数据类型时


const [count, setCount] = useState[0];

useEffect(() =&gt; {

console.log(count)

}, [count]);

这里当count发生变化时会在usee]]></description><category></category></item><item><title><![CDATA[2020-09-17 实现react-beautiful-dnd+多层级树收缩展开（类比antd的tree）]]></title><link>https://blog.youkuaiyun.com/Alison_Z/article/details/108642969</link><guid>https://blog.youkuaiyun.com/Alison_Z/article/details/108642969</guid><author>Alison_Z</author><pubDate>Thu, 17 Sep 2020 14:51:37 +0800</pubDate><description><![CDATA[实现本要求的前提是多层级的树可以拖动，并且样式有一定的要求

1.antd的tree

antd提供了tree组件来实现多层级的层次结构，但是扩展性相对比较有限，关键的代码如下所示


{/* &lt;Tree

// showLine={true}

// showIcon={true}

defaultExpandAll

defaultExpandedKeys={[]}

blockNode

&gt;

{renderTreeNodes(data)}

&lt;/Tree&gt; */}


使用r]]></description><category></category></item><item><title><![CDATA[echarts实现数据可视化]]></title><link>https://blog.youkuaiyun.com/Alison_Z/article/details/103506078</link><guid>https://blog.youkuaiyun.com/Alison_Z/article/details/103506078</guid><author>Alison_Z</author><pubDate>Thu, 12 Dec 2019 11:28:41 +0800</pubDate><description><![CDATA[在实际工作中，对于数据的处理常常需要对数据进行可视化的操作，本文针对日常需要总结了echarts的使用姿势

echarts的常规使用
根据项目的需要选择合适的可视化图标，引入echarts包

设定我们需要的图形type类型：

bar
			柱形图
		pie
			饼图
		...
		设定特定的类型以后对数据进行加工，得到我们需要的数据格式，如果需要对可视化图形做进一步的组合拓展可以通过r...]]></description><category></category></item><item><title><![CDATA[前端样式管理]]></title><link>https://blog.youkuaiyun.com/Alison_Z/article/details/103497079</link><guid>https://blog.youkuaiyun.com/Alison_Z/article/details/103497079</guid><author>Alison_Z</author><pubDate>Wed, 11 Dec 2019 17:59:50 +0800</pubDate><description><![CDATA[在前端开发过程中，随着项目的扩大，良好的样式管理占据着举足轻重的作用

常用方法的预设

创建一个样式文件在全局引用，对于常用的一些css样式我们首先作出处理，比如下面的这些缩写及其实际的样式。

.f-ib{display:inline-block;*display:inline;*zoom:1;}
	.f-dn{display:none;}
	.f-db{display:block;}
	.f...]]></description><category></category></item><item><title><![CDATA[js构建层级树的几种方法]]></title><link>https://blog.youkuaiyun.com/Alison_Z/article/details/103180403</link><guid>https://blog.youkuaiyun.com/Alison_Z/article/details/103180403</guid><author>Alison_Z</author><pubDate>Thu, 21 Nov 2019 12:35:44 +0800</pubDate><description><![CDATA[const filterList = jiraList.filter(i =&gt; !i.parentKey ||

!jiraList.some(it =&gt; it.key === i.parentKey));

// 如果节点存在parentKey但是parentKey对应的对象不在数组内，则需要提升当前节点为父节点

const exceptParent = jiraList.f...]]></description><category></category></item><item><title><![CDATA[redux全局数据使用出现问题结合深拷贝的思考]]></title><link>https://blog.youkuaiyun.com/Alison_Z/article/details/100142890</link><guid>https://blog.youkuaiyun.com/Alison_Z/article/details/100142890</guid><author>Alison_Z</author><pubDate>Thu, 29 Aug 2019 20:07:46 +0800</pubDate><description><![CDATA[最近遇到一个需求使用redux可以比较简洁的实现，但是比较奇怪的是出现了下面的问题：



从图中可以看出status的值实际上已经是true,然后在真正使用时渲染出来的是false。经过调试发现，原因在于对于redux中的数据进行操作时是浅拷贝的方式，实际上指针指向的仍是最初初始化的值，因此导致了取值时不正确的情况！

由于数据结构只涉及一层，最终选择了es6的扩展运算符解决了该问题。

深拷贝...]]></description><category></category></item><item><title><![CDATA[表格拖拽排序之react-dnd---结合antd Table]]></title><link>https://blog.youkuaiyun.com/Alison_Z/article/details/100141647</link><guid>https://blog.youkuaiyun.com/Alison_Z/article/details/100141647</guid><author>Alison_Z</author><pubDate>Thu, 29 Aug 2019 17:10:40 +0800</pubDate><description><![CDATA[实现效果



首先引入react-dnd需要的npm包


import { DndProvider, DragSource, DropTarget } from 'react-dnd';
import HTML5Backend from 'react-dnd-html5-backend';
import update from 'immutability-helper';

其次设置Table...]]></description><category></category></item><item><title><![CDATA[antd使用TimePicker时报错]]></title><link>https://blog.youkuaiyun.com/Alison_Z/article/details/81460122</link><guid>https://blog.youkuaiyun.com/Alison_Z/article/details/81460122</guid><author>Alison_Z</author><pubDate>Mon, 06 Aug 2018 19:50:54 +0800</pubDate><description><![CDATA[看报错的原因：最后一句，你可能有react的多个版本存在。然后点击下面的details可以看到文章最后建议我们可以npm ls react来看一下，于是有了我的第二张图





对于第二张图我们猜测可能时react的版本有问题，于是先对npm进行更新



得以解决。...]]></description><category></category></item><item><title><![CDATA[React创建组件的三种方式及其区别（有状态组件和无状态组件）]]></title><link>https://blog.youkuaiyun.com/Alison_Z/article/details/81460030</link><guid>https://blog.youkuaiyun.com/Alison_Z/article/details/81460030</guid><author>Alison_Z</author><pubDate>Mon, 06 Aug 2018 19:43:55 +0800</pubDate><description><![CDATA[React推出后，出于不同的原因先后出现三种定义react组件的方式，殊途同归；具体的三种方式：

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

无状态...]]></description><category></category></item><item><title><![CDATA[react页面传参跳转Link&hashHistory]]></title><link>https://blog.youkuaiyun.com/Alison_Z/article/details/81450605</link><guid>https://blog.youkuaiyun.com/Alison_Z/article/details/81450605</guid><author>Alison_Z</author><pubDate>Mon, 06 Aug 2018 10:58:53 +0800</pubDate><description><![CDATA[第一种方式使用link：

&amp;lt;Link to={{ pathname: 'purchaseRecord', type: 'inputs', id: '1'}} &amp;gt;&amp;lt;a onClick={()=&amp;gt;this.handleRecord()}&amp;gt;拼团记录&amp;lt;/a&amp;gt;&amp;lt;/Link&amp;gt;

获取传过来的值：this.props.location.type/id

第...]]></description><category></category></item><item><title><![CDATA[react中 配置一个简单的web服务器使用npm start启动]]></title><link>https://blog.youkuaiyun.com/Alison_Z/article/details/81099161</link><guid>https://blog.youkuaiyun.com/Alison_Z/article/details/81099161</guid><author>Alison_Z</author><pubDate>Wed, 18 Jul 2018 15:39:21 +0800</pubDate><description><![CDATA[第一种方式：安装依赖react-scripts



第二种方式：

使用webpack-dev-server来配置启动WEB服务器。
	
	来自链接webpack-dev-server
]]></description><category></category></item><item><title><![CDATA[react、redux、react-redux之间的关系]]></title><link>https://blog.youkuaiyun.com/Alison_Z/article/details/80898849</link><guid>https://blog.youkuaiyun.com/Alison_Z/article/details/80898849</guid><author>Alison_Z</author><pubDate>Tue, 03 Jul 2018 15:07:58 +0800</pubDate><description><![CDATA[本文介绍了react、redux、react-redux之间的关系，分享给大家，也给自己留个笔记，具体如下：React一些小型项目，只使用 React 完全够用了，数据管理使用props、state即可，那什么时候需要引入Redux呢？ 当渲染一个组件的数据是通过props从父组件中获取时，通常情况下是 A --&amp;gt; B，但随着业务复杂度的增加，有可能是这样的：A --&amp;gt; B --&amp;gt...]]></description><category></category></item><item><title><![CDATA[实现有多个图片的遍历显示react]]></title><link>https://blog.youkuaiyun.com/Alison_Z/article/details/80826945</link><guid>https://blog.youkuaiyun.com/Alison_Z/article/details/80826945</guid><author>Alison_Z</author><pubDate>Wed, 27 Jun 2018 12:27:52 +0800</pubDate><description><![CDATA[如图要想实现这个效果，首先这些图片是存储在一个数组中的，我们要取出图片然后遍历显示出来，可以如下显示：        render: (text) =&amp;gt; {          if (text &amp;amp;&amp;amp; text.length) {            const imgs = text.map((item, index) =&amp;gt;              &amp;lt;div ...]]></description><category></category></item><item><title><![CDATA[js中map和forEach的区别]]></title><link>https://blog.youkuaiyun.com/Alison_Z/article/details/80811317</link><guid>https://blog.youkuaiyun.com/Alison_Z/article/details/80811317</guid><author>Alison_Z</author><pubDate>Tue, 26 Jun 2018 10:21:23 +0800</pubDate><description><![CDATA[最近在写项目中发现如果想要对一个数组进行操作经常会用到遍历的方式，在用到遍历的方式的时候经常用到的有map和forEach方法，下面结合我查阅的资料和自己项目中的体会谈谈二者的区别。首先map方法：map对一个数组对象进行操作时，一般是生成一个新的数组，可以在map中限制生成新数组的条件，有返回值forEach方法：forEach方法一般是对原有的数组进行操作，没有返回值示例下方提供了一个数组，如...]]></description><category></category></item><item><title><![CDATA[js函数之some和filter]]></title><link>https://blog.youkuaiyun.com/Alison_Z/article/details/80797783</link><guid>https://blog.youkuaiyun.com/Alison_Z/article/details/80797783</guid><author>Alison_Z</author><pubDate>Mon, 25 Jun 2018 10:12:53 +0800</pubDate><description><![CDATA[最近在实现一个功能时一开始想的比较简单，后来因为需要更加完善的功能一时无从下手最终是带我的学长实现的，看了他写的代码学到不少，下面记录一下自己的心得体会。如图要实现的是左边模糊查询以后右边显示出查询的结果，然后点击相应的结果以后下方显示出对应的记录。首先对于上面的查询显示就是一个简单的模糊查询主要依靠后台的结果，然后将查询的结果放在select的option里面即可对于下方的展示功能（注意还有右方...]]></description><category></category></item><item><title><![CDATA[关于react的resetFields使用]]></title><link>https://blog.youkuaiyun.com/Alison_Z/article/details/80762652</link><guid>https://blog.youkuaiyun.com/Alison_Z/article/details/80762652</guid><author>Alison_Z</author><pubDate>Thu, 21 Jun 2018 16:41:57 +0800</pubDate><description><![CDATA[最近在写项目中为了清空modal中的值，所以用到了resetFields方法，该方法主要是对form中的值进行重置，没有默认值的情况下会被清空但是需要注意的是若是有需要部分的值一直存在的话，要注意在清空之前进行一个保存，在清空之后在用setFieldsValue进行设置如图注意resetFields的位置...]]></description><category></category></item><item><title><![CDATA[react span设置行内样式自动换行]]></title><link>https://blog.youkuaiyun.com/Alison_Z/article/details/80732462</link><guid>https://blog.youkuaiyun.com/Alison_Z/article/details/80732462</guid><author>Alison_Z</author><pubDate>Tue, 19 Jun 2018 12:56:34 +0800</pubDate><description><![CDATA[设置样式之前要先设置display和width，因为span是行内元素本身是没有宽度的宽度默认是auto，所以如果不事先设置这两个属性直接设置whiteSpace是不起作用的。...]]></description><category></category></item><item><title><![CDATA[antd datePicker控件获取时间]]></title><link>https://blog.youkuaiyun.com/Alison_Z/article/details/80729247</link><guid>https://blog.youkuaiyun.com/Alison_Z/article/details/80729247</guid><author>Alison_Z</author><pubDate>Tue, 19 Jun 2018 10:19:19 +0800</pubDate><description><![CDATA[获取默认时间的二种方式第一种首先是获取当前时间可以是这样的注意到这里设置的defaultValue就是显示的默认时间如果想要获取一段时间比如说7天以前的我们可以这样const startTime = moment().add(-7,'days').format('YYYY-MM-DD');然后将moment的第一个参数改成startTime即可第二种这种情况可能是你把dataPicker放到了fo...]]></description><category></category></item><item><title><![CDATA[react组件封装自己的理解]]></title><link>https://blog.youkuaiyun.com/Alison_Z/article/details/80656523</link><guid>https://blog.youkuaiyun.com/Alison_Z/article/details/80656523</guid><author>Alison_Z</author><pubDate>Mon, 11 Jun 2018 19:18:41 +0800</pubDate><description><![CDATA[为什么使用组件

一开始用react做项目的时候只知道react是组件化的，但是没有深入去理解为什么要封装组件，怎样去封装组件

上周在实际项目中自己尝试去封装了一个组件，最大的感受就是代码变得简洁了很多，本来要写三次类似代码现在只写一次就搞定了，不得不感概组件封装最实在的意义。

另一方面是可以提高我们编程的效率，代码复用性高了自然效率高了。

最后我觉得是提高思考的能力吧，换种更简单的方式去实...]]></description><category></category></item></channel></rss>