<?xml version="1.0" encoding="utf-8" ?><rss version="2.0"><channel><title><![CDATA[arvin_top的博客]]></title><description><![CDATA[]]></description><link>https://blog.youkuaiyun.com/arvin_top</link><language>zh-cn</language><generator>https://blog.youkuaiyun.com/</generator><copyright><![CDATA[Copyright &copy; arvin_top]]></copyright><item><title><![CDATA[ES7前端异步玩法：async/await理解]]></title><link>https://blog.youkuaiyun.com/arvin_top/article/details/92208499</link><guid>https://blog.youkuaiyun.com/arvin_top/article/details/92208499</guid><author>arvin_top</author><pubDate>Sat, 15 Jun 2019 22:01:08 +0800</pubDate><description><![CDATA[在最新的ES7（ES2017）中提出的前端异步特性：async、await。

什么是async、await？

async顾名思义是“异步”的意思，async用于声明一个函数是异步的。而await从字面意思上是“等待”的意思，就是用于等待异步完成。并且await只能在async函数中使用

通常async、await都是跟随Promise一起使用的。为什么这么说呢？因为async返回的都是一个P...]]></description><category></category></item><item><title><![CDATA[React中setState真的是异步的吗]]></title><link>https://blog.youkuaiyun.com/arvin_top/article/details/91359036</link><guid>https://blog.youkuaiyun.com/arvin_top/article/details/91359036</guid><author>arvin_top</author><pubDate>Sun, 09 Jun 2019 23:27:34 +0800</pubDate><description><![CDATA[在学习react的过程中几乎所有学习材料都会反复强调一点setState是异步的,来看一下react官网对于setState的说明。


将setState()认为是一次请求而不是一次立即执行更新组件的命令。为了更为可观的性能，React可能会推迟它，稍后会一次性更新这些组件。React不会保证在setState之后，能够立刻拿到改变的结果。


一个很经典的例子如下


// state.cou...]]></description><category></category></item><item><title><![CDATA[其实我们可以少写点if else和switch]]></title><link>https://blog.youkuaiyun.com/arvin_top/article/details/86437947</link><guid>https://blog.youkuaiyun.com/arvin_top/article/details/86437947</guid><author>arvin_top</author><pubDate>Sun, 13 Jan 2019 21:23:15 +0800</pubDate><description><![CDATA[前言

作为搬砖在第一线的底层工人，业务场景从来是没有做不到只有想不到的复杂。
不过他强任他强，if-else全搞定，搬就完了。但是随着业务迭代或者项目交接，自己在看自己或者别人的if代码的时候，心情就不再表述了，各自深有体会。所以我们一起看看if还能怎么写

最基本if-else

假设有这么个场景,不同情况下打印不同值。 因为涉及到的条件太多，就不提三目运算之类优化了。


if (a == ...]]></description><category></category></item><item><title><![CDATA[div里包含img底部多出3px的解决办法]]></title><link>https://blog.youkuaiyun.com/arvin_top/article/details/86235646</link><guid>https://blog.youkuaiyun.com/arvin_top/article/details/86235646</guid><author>arvin_top</author><pubDate>Thu, 10 Jan 2019 15:34:18 +0800</pubDate><description><![CDATA[如果将一个img放在div里面，你会发现在img下面无端端的就多出3px的空白出来。padding、margin、border都设为0，无效！那么怎么解决这个问题呢？

如果将一个img放在div里面，你会发现在img下面无端端的就多出3px的空白出来。padding、margin、border都设为0，无效！那么怎么解决这个问题呢？

这个Bug真是十分有意思，不过有N多种解决办法！

1、设置...]]></description><category></category></item><item><title><![CDATA[高效的 MobX]]></title><link>https://blog.youkuaiyun.com/arvin_top/article/details/86186421</link><guid>https://blog.youkuaiyun.com/arvin_top/article/details/86186421</guid><author>arvin_top</author><pubDate>Wed, 09 Jan 2019 22:59:34 +0800</pubDate><description><![CDATA[前言

由于最近开启一个新的个人小项目，准备还是使用 React 及其生态来实现整个技术架构，之前一直使用的是 React + React-Router + Redux 组合，虽然说使用 Redux 来管理整个应用的数据流有着优点，但是 Redux 的写法繁琐也确实让人诟病，当然这里并不是说 Redux 不好。
基于项目本身并不大，决定寻找一个新的解决方案，而 MobX 在之前就有所耳闻（只是一直...]]></description><category></category></item><item><title><![CDATA[React组件之间通讯]]></title><link>https://blog.youkuaiyun.com/arvin_top/article/details/85641340</link><guid>https://blog.youkuaiyun.com/arvin_top/article/details/85641340</guid><author>arvin_top</author><pubDate>Wed, 02 Jan 2019 21:24:23 +0800</pubDate><description><![CDATA[父子之间通讯

父子之间通讯又分为父-&amp;gt;子，子-&amp;gt;父。

因为react单向数据流向的缘故，父-&amp;gt;子通信的话直接通过props。父组件数据变动，直接传递给子组件。

子-&amp;gt;父组件之间就要通过回调函数来通信了，父组件传递一个回调函数给子组件，子组件通过调用此函数的方式通知父组件通信。

跨级组件通信

react为了实现祖先组件和后辈组件之间的通信问题，引入了contextA...]]></description><category></category></item><item><title><![CDATA[ES6 对数组的扩展]]></title><link>https://blog.youkuaiyun.com/arvin_top/article/details/85268277</link><guid>https://blog.youkuaiyun.com/arvin_top/article/details/85268277</guid><author>arvin_top</author><pubDate>Wed, 26 Dec 2018 20:28:03 +0800</pubDate><description><![CDATA[一、Array.of()函数

函数作用：将一组值，转换成数组


var arr=Array.of(1,2,3,4)
console.log(arr) // [1,2,3,4]

二、Array.from()函数

1.可以将类似数组的对象或者可遍历的对象转换成真正的数组。

比如：getElementsByTagName等


let ele = document.getElementsByT...]]></description><category></category></item><item><title><![CDATA[combineReducers 进阶之不同 reducers 之间共享数据]]></title><link>https://blog.youkuaiyun.com/arvin_top/article/details/85085232</link><guid>https://blog.youkuaiyun.com/arvin_top/article/details/85085232</guid><author>arvin_top</author><pubDate>Tue, 18 Dec 2018 23:56:27 +0800</pubDate><description><![CDATA[如果 sliceReducerA 为了处理特殊的 action 正好需要来自 sliceReducerB 的部分 state 数据，或者 sliceReducerB 正好需要全部的 state 作为参数，单单就 combineReducers 是无法解决这种问题的。可以这样来解决：把所需数据当额外参数的形式传递给自定义函数，例如：


function combinedReducer(state,...]]></description><category></category></item><item><title><![CDATA[es6 Object的一些方法]]></title><link>https://blog.youkuaiyun.com/arvin_top/article/details/85042755</link><guid>https://blog.youkuaiyun.com/arvin_top/article/details/85042755</guid><author>arvin_top</author><pubDate>Mon, 17 Dec 2018 00:23:32 +0800</pubDate><description><![CDATA[Object.is()

比较两个值是否严格相等，与严格比较运算符（===）的行为基本一致。

不同之处只有两个：一是+0不等于-0，二是NaN等于自身。

Object.assign()

Object.assign方法用于对象的合并，将源对象（source）的所有可枚举属性，复制到目标对象（target）。

Object.assign方法的第一个参数是目标对象，后面的参数都是源对象。

注意...]]></description><category></category></item><item><title><![CDATA[Redux之可记忆的Selector]]></title><link>https://blog.youkuaiyun.com/arvin_top/article/details/85039263</link><guid>https://blog.youkuaiyun.com/arvin_top/article/details/85039263</guid><author>arvin_top</author><pubDate>Sun, 16 Dec 2018 18:35:56 +0800</pubDate><description><![CDATA[如果 state tree 非常大，或者计算量非常大，每次更新都重新计算可能会带来性能问题。Reselect 能帮你省去这些没必要的重新计算。

我们需要一个可记忆的 selector 来替代这个 getVisibleTodos，只在 state.todos or state.visibilityFilter 变化时重新计算 todos，而在其它部分（非相关）变化时不做计算。

Reselect ...]]></description><category></category></item><item><title><![CDATA[JS的防抖与节流]]></title><link>https://blog.youkuaiyun.com/arvin_top/article/details/85016253</link><guid>https://blog.youkuaiyun.com/arvin_top/article/details/85016253</guid><author>arvin_top</author><pubDate>Sat, 15 Dec 2018 17:49:58 +0800</pubDate><description><![CDATA[在进行窗口的resize、scroll，输入框内容校验等操作时，如果事件处理函数调用的频率无限制，会加重浏览器的负担，导致用户体验非常糟糕。此时我们可以采用debounce（防抖）和throttle（节流）的方式来减少调用频率，同时又不影响实际效果。

 

函数防抖

 

函数防抖（debounce）：当持续触发事件时，一定时间段内没有再触发事件，事件处理函数才会执行一次，如果设定的时间到来之...]]></description><category></category></item><item><title><![CDATA[关于return function(){}常见的问题]]></title><link>https://blog.youkuaiyun.com/arvin_top/article/details/85016010</link><guid>https://blog.youkuaiyun.com/arvin_top/article/details/85016010</guid><author>arvin_top</author><pubDate>Sat, 15 Dec 2018 17:44:31 +0800</pubDate><description><![CDATA[1.我们知道当函数赋值时，会首先进行右边的程序，下方代码恰好是一个匿名函数自运行，在自运行函数中return 一个方法，外部用一个变量gg接收这个方法，这样我们可以直接调用这个方法


var a = (function(){
	return function(){
		console.log(123);
    }
})()
a();

2.当自运行函数中嵌套自运行函数时，那么return出来的...]]></description><category></category></item><item><title><![CDATA[Redux基础]]></title><link>https://blog.youkuaiyun.com/arvin_top/article/details/84975856</link><guid>https://blog.youkuaiyun.com/arvin_top/article/details/84975856</guid><author>arvin_top</author><pubDate>Wed, 12 Dec 2018 17:01:08 +0800</pubDate><description><![CDATA[Action

Action 是把数据从应用（译者注：这里之所以不叫 view 是因为这些数据有可能是服务器响应，用户输入或其它非 view 的数据 ）传到 store 的有效载荷。它是 store 数据的唯一来源。一般来说你会通过 store.dispatch() 将 action 传到 store。

Action 本质上是 JavaScript 普通对象。我们约定，action 内必须使用一...]]></description><category></category></item><item><title><![CDATA[Redux三大原则]]></title><link>https://blog.youkuaiyun.com/arvin_top/article/details/84963350</link><guid>https://blog.youkuaiyun.com/arvin_top/article/details/84963350</guid><author>arvin_top</author><pubDate>Tue, 11 Dec 2018 23:08:13 +0800</pubDate><description><![CDATA[三大原则

单一数据源

整个应用的 state 被储存在一棵 object tree 中，并且这个 object tree 只存在于唯一一个 store 中。

这让同构应用开发变得非常容易。来自服务端的 state 可以在无需编写更多代码的情况下被序列化并注入到客户端中。由于是单一的 state tree ，调试也变得非常容易。在开发中，你可以把应用的 state 保存在本地，从而加快开发速度...]]></description><category></category></item><item><title><![CDATA[table组件的固定列和表头 优化]]></title><link>https://blog.youkuaiyun.com/arvin_top/article/details/84942723</link><guid>https://blog.youkuaiyun.com/arvin_top/article/details/84942723</guid><author>arvin_top</author><pubDate>Mon, 10 Dec 2018 17:01:51 +0800</pubDate><description><![CDATA[对于需要固定表头和表列的table，往往数据量都比较大。我们可以对现有的实现方式做更进一步的优化尝试。

使用tranfrom来代替设置scrollLeft

考虑浏览器重排和重绘，一般来说，scrollLeft会引起一次重排，而transfrom仅仅是一次重绘，同时我们可以使用transform3D使用GPU来加速浏览器的渲染。那么，是不是可以考虑在scroll事件中，使用transform来代...]]></description><category></category></item><item><title><![CDATA[table组件的固定列和表头 布局]]></title><link>https://blog.youkuaiyun.com/arvin_top/article/details/84942433</link><guid>https://blog.youkuaiyun.com/arvin_top/article/details/84942433</guid><author>arvin_top</author><pubDate>Mon, 10 Dec 2018 16:55:43 +0800</pubDate><description><![CDATA[固定列&amp;amp;表头

对于表格信息来说，往往有些信息是重要的，需要一目了然的看清楚，而不是通过滚动才能看到用户需要的信息。将关键的表格列进行固定，而次要信息放置在可滚动查看的容器中，可以突出表格信息的重要性，同时，对于方便用户更好的在当前窗口进行交互，而不需要更多的操作。

对于以上两种交互的优化，Ant Design - A UI Design Language给出了很好的示例。



对于固...]]></description><category></category></item><item><title><![CDATA[table组件的固定列和表头]]></title><link>https://blog.youkuaiyun.com/arvin_top/article/details/84940950</link><guid>https://blog.youkuaiyun.com/arvin_top/article/details/84940950</guid><author>arvin_top</author><pubDate>Mon, 10 Dec 2018 15:39:34 +0800</pubDate><description><![CDATA[最近写了个table组件，主要实现了固定列和表头

具体参考了这篇文章：https://segmentfault.com/a/1190000012568782

对table的优化讲得挺详细，后续我再自己总结一下。...]]></description><category></category></item><item><title><![CDATA[create-react-app中添加less支持]]></title><link>https://blog.youkuaiyun.com/arvin_top/article/details/84939055</link><guid>https://blog.youkuaiyun.com/arvin_top/article/details/84939055</guid><author>arvin_top</author><pubDate>Mon, 10 Dec 2018 14:11:56 +0800</pubDate><description><![CDATA[使用 create-react-app 脚手架创建项目后，默认是不支持 less 的。所以我们需要手动添加。

第一步 暴露webpack配置文件

使用 create-react-app 创建的项目，默认情况下是看不到 webpack 相关的配置文件，我们需要给它暴露出来，使用下面命令即可：


npm run eject

运行之后，我们发现多了一个config文件夹

这样就可以修改 web...]]></description><category></category></item><item><title><![CDATA[Fixed定位下的水平居中]]></title><link>https://blog.youkuaiyun.com/arvin_top/article/details/84893635</link><guid>https://blog.youkuaiyun.com/arvin_top/article/details/84893635</guid><author>arvin_top</author><pubDate>Sat, 08 Dec 2018 15:58:37 +0800</pubDate><description><![CDATA[在写气泡弹出提示组件时用到了这个样式：

适用于提示弹出框之类的


position: fixed;
left: 0;
right: 0;
margin: auto;

 ]]></description><category></category></item><item><title><![CDATA[React  性能优化]]></title><link>https://blog.youkuaiyun.com/arvin_top/article/details/84888538</link><guid>https://blog.youkuaiyun.com/arvin_top/article/details/84888538</guid><author>arvin_top</author><pubDate>Fri, 07 Dec 2018 23:18:32 +0800</pubDate><description><![CDATA[总结一下react性能优化相关知识：

避免重复渲染：

当一个组件的props或者state改变时，React通过比较新返回的元素和之前渲染的元素来决定是否有必要更新实际的DOM。当他们不相等时，React会更新DOM。

在一些情况下，你的组件可以通过重写这个生命周期函数shouldComponentUpdate来提升速度， 它是在重新渲染过程开始前触发的。 这个函数默认返回true，可使Re...]]></description><category></category></item></channel></rss>