前端杂记(一)

2019 / 07 / 15

上班的时候学东西总是非常零散的,不会有时间系统的学透彻很多东西,更没时间写一些系统的东西。为了记下每次想到或者遇到的问题,我打算写非常多非常的杂记,可能一年后就会出现一片文章名字叫做《前端杂记(一百零一)》了。

React的setState不是异步的

React的setState是“异步”的可能是react给前端开发者们造成的最大的假象了,因为从react的源码看,整个setState的过程中是完全找不到js的异步的标志性代码的,比如promise或者setTimeout。

那为什么会造成异步的假象呢,React setState的过程中会判断 isBatchingUpdate 是否为true,如果是的话只会把state和component放到 dirtyComponents 队列中等最后去更新,如果不处于那么就会立即执行batchUpdate。当 ReactLifeCyle 或者 ReactEventHandler 执行的时候 isBatchingUpdate 已经被React设置为true了,所以就造成了异步的假象。

这也是因为React官方文档并没有说setState是异步的,只是说他不会保证setState可以立马更新。

给弹出的组件加动画

众所周知,弹出的组件咔嚓显示出来会显得有点生硬,加个动画效果会让整个效果看起来缓和好多,甚至可以看起来有些格外的情绪在里边,比如 紧急的弹出再加些震动会表现出警告的感觉,比如从上而下或者向下边那种会给人对话的感觉。

增加动画看起来就是一个animation就能解决的问题,事实上还是有些小复杂的,应该吧动画加在什么地方,怎么加,如何删除消失的dom,尤其是如何删除结束的dom。

弹出类组件除了visible来关系是否加进入和结束的动画,还需要一个exist来控制是否渲染,这样就能解开存在和结束这两个问题的耦合了。核心代码如下。

1. 首先需要一个visible属性控制动画的进出,像下边这样。

<>
<div className={classnames('ui-modal-mask', visible ? 'fade-in-animated' : 'fade-out-animated')} />
<div className={classnames('ui-toast', visible ? 'toast-pop-in-animated' : 'toast-pop-out-animated')}>
{message || children}
</div>
</>

2. 需要一个exist状态判断动画是否结束,如果动画结束了那么应该删除dom。

const { exist } = this.state
if (!exist) return null

在componentDidUpdate中增加对visible的判断,如果visible为false,那么会延迟300毫秒来执行动画。

componentDidUpdate(prevProps) {
if (this.props.visible !== prevProps.visible) {
if (this.props.visible) {
this.setState({ exist: true })
} else {
setTimeout(() => this.setState({ exist: false }), 300)
}
}
}

3. 最后贴上上边那个效果的动画

@keyframes modal-pop-in {
0% {
opacity: 0;
transform: translateX(-50%) translateY(-50%) scale(0.65);
}

65% {
opacity: .65;
transform: translateX(-50%) translateY(-50%) scale(1.08);
}

100% {
opacity: 1;
transform: translateX(-50%) translateY(-50%) scale(1.0);
}
}

npm version <type>命令

管理版本也有快捷的命令,一般版本号有三个数字组成,比如6.2.13,三个数字分别代表了major主版本,minor 次版本,patch 补丁版本。可以通过npm version <type>命令来修改版本号。

比如执行npm version patch就会让第三个版本号加一,比如6.2.13会变成6.2.14,同时也会更改package-lock.json里的版本号,而且会执行git提交一个commit。

虽然这个命令没什么大的用处,但还是便捷了一些的,比如在做自动化的时候会很有用。更重要的一点是知道了每个号码的意义以及如何去规范的使用版本号。

嗨,请先 登录

加载中...
(๑>ω<๑) 又是元气满满的一天哟